office-ui-fabric - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

bower.json

 {
   "name": "office-ui-fabric",
   "author": "Office UI Fabric Team",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "The front-end framework for building experiences for Office 365.",
@@ -11,2 +11,7 @@ "license": "MIT",
   },
+  "main": [
+    "dist/css/fabric.css",
+    "dist/css/fabric.components.css",
+    "dist/js/jquery.fabric.js"
+  ],
   "private": false,
@@ -17,2 +22,2 @@ "ignore": [
   ]
-}
+}

dist/components/Breadcrumb/Breadcrumb.json

@@ -5,3 +5,6 @@ {
   "template": "Breadcrumb.html",
-  "class": "ms-Breadcrumb"
+  "class": "ms-Breadcrumb",
+  "dependencies": [
+    "ContextualMenu"
+  ]
 }

dist/components/CommandBar/Jquery.CommandBar.js

@@ -22,9 +22,11 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
         var $Item = $(this);
-        var $rightOffset = ($Item.offset().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.offset().left; // Added padding of 10
+        var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10
         commands.push({ jquery: $Item, rightOffset: $rightOffset});
+        console.log($Item.outerWidth(), index, $commandarea.position().left, $Item.position().left);
       });
+
       return commands;
     }
 
-    var processCommands = function(commands, width) {
+    var processCommands = function(commands, width, overflowwidth) {
         var overFlowCommands = [];
@@ -38,3 +40,3 @@
           if(!$Item.hasClass('ms-CommandBarItem-overflow')) {
-            if(rightOffset > width) {
+            if((rightOffset + overflowwidth) > width) {
               overFlowCommands.push($Item);
@@ -59,3 +61,2 @@ } else {
           // Add overflowed commands to ContextualMenu
-
           for(i = 0; i < overFlowCommands.length; i++) {
@@ -78,3 +79,3 @@ var $Item = $(overFlowCommands[i]);
       var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea');
-      var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem');
+      var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow');
       var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow');
@@ -92,10 +93,10 @@ var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth();
       // Initiate process commands and add commands to overflow on load
-      overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
+      overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
       processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
       // Set Search Behavior
-      if($(window).width() < 640) {
+      if($(window).width() < 640) { 
 
-        $('.ms-CommandBarSearch').click(function() {
-          $(this).addClass('is-active');
+        $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+          $(this).closest('.ms-CommandBarSearch').addClass('is-active');
         });
@@ -108,22 +109,36 @@
         var overFlowCommands;
-        overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
-        processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
         if($(window).width() < 640 && mobileSwitch == false) {
+
+          console.log("Switching to mobile");
+
+          // Go through process and save commands
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+         
           mobileSwitch = true;
 
           // Search Behavior
-          $('.ms-CommandBarSearch').unbind();
-          $('.ms-CommandBarSearch').click(function() {
-            $(this).addClass('is-active');
+          $('.ms-CommandBarSearch-iconSearchWrapper').unbind();
+          $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+            $(this).closest('.ms-CommandBarSearch').addClass('is-active');
           });
 
         } else if($(window).width() > 639 && mobileSwitch == true) {
+
+          console.log("Switching to Desktop");
+
+          // Go through process and save commands
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
           mobileSwitch = false;
-
           $('.ms-CommandBarSearch').unbind();
-        }
 
+        } 
+
+        console.log(allCommands, $CommandMainArea.innerWidth());
+
+        // Initiate process commands and add commands to overflow on load
+        overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+        processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+      
       });
@@ -136,2 +151,6 @@
 
+      $OverflowCommand.focusout(function() {
+        $OverflowMenu.removeClass('is-open');
+      });
+
       $SearchBox.find('.ms-CommandBarSearch-input').click(function() {
@@ -141,2 +160,6 @@ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
 
+      $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() {
+        $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+      });
+
        // When clicking the x clear the SearchBox and put state back to normal
@@ -143,0 +166,0 @@ $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {

dist/components/DatePicker/Jquery.DatePicker.js

@@ -6,164 +6,85 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
   /**
-   * @param {object} options DatePicker options
-   * @param {array} options.optionMonths An array of month abbreviations for the options grid
-   * @param {string} options.label A label for the DatePicker
-   * @param {string} options.placeholderText Placeholder text for the DatePicker textfield
+   * DatePicker Plugin
    */
+
   $.fn.DatePicker = function (options) {
 
-    var datePicker;
-    var self = this;
-    var optionMonths = options && options.optionMonths || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    var label = options && options.label || "Start Date";
-    var placeholderText = options && options.placeholderText || "Select a date";
+    return this.each(function () {
 
-    /** check if the PickaDate plugin exists, if not load the plugin */
-    if (!$().pickadate) {
-      var firstScript = document.getElementsByTagName("script")[0];
-      var script = document.createElement("script");
-      script.onload = returnDatePicker;
-      script.src = "PickaDate.js";
-      firstScript.parentNode.insertBefore(script, firstScript);
-    } else {
-      datePicker = returnDatePicker();
-    }
+      /** Set up variables and run the Pickadate plugin. */
+      var $datePicker = $(this);
+      var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({
+        // Strings and translations.
+        weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
 
-    function returnDatePicker() {
-      /** Iterate through each date picker provided. */
-      return self.each(function () {
+        // Don't render the buttons
+        today: '',
+        clear: '',
+        close: '',
 
-        var $datePicker = $(this);
+        // Events
+        onStart: function() {
+          initCustomView($datePicker);
+        },
 
-        /**create the body of the datepicker */
-        appendElements($datePicker, optionMonths);
+        // Classes
+        klass: {
 
-        /** insert label and placeholder text */
-        $datePicker.find('.ms-Label').text(label);
-        $datePicker.find('.ms-TextField-field').attr("placeholder", placeholderText + "...");
+          // The element states
+          input: 'ms-DatePicker-input',
+          active: 'ms-DatePicker-input--active',
 
-        /** Set up variables and run the Pickadate plugin. */
-        var $dateField = $datePicker.find('.ms-TextField-field').pickadate({
-          // Strings and translations.
-          weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+          // The root picker and states
+          picker: 'ms-DatePicker-picker',
+          opened: 'ms-DatePicker-picker--opened',
+          focused: 'ms-DatePicker-picker--focused',
 
-          // Don't render the buttons
-          today: '',
-          clear: '',
-          close: '',
+          // The picker holder
+          holder: 'ms-DatePicker-holder',
 
-          // Events
-          onStart: function() {
-            initCustomView($datePicker);
-          },
+          // The picker frame, wrapper, and box
+          frame: 'ms-DatePicker-frame',
+          wrap: 'ms-DatePicker-wrap',
+          box: 'ms-DatePicker-dayPicker',
 
-          // Classes
-          klass: {
+          // The picker header
+          header: 'ms-DatePicker-header',
 
-            // The element states
-            input: 'ms-DatePicker-input',
-            active: 'ms-DatePicker-input--active',
+          // Month & year labels
+          month: 'ms-DatePicker-month',
+          year: 'ms-DatePicker-year',
 
-            // The root picker and states
-            picker: 'ms-DatePicker-picker',
-            opened: 'ms-DatePicker-picker--opened',
-            focused: 'ms-DatePicker-picker--focused',
+          // Table of dates
+          table: 'ms-DatePicker-table',
 
-            // The picker holder
-            holder: 'ms-DatePicker-holder',
+          // Weekday labels
+          weekdays: 'ms-DatePicker-weekday',
 
-            // The picker frame, wrapper, and box
-            frame: 'ms-DatePicker-frame',
-            wrap: 'ms-DatePicker-wrap',
-            box: 'ms-DatePicker-dayPicker',
+          // Day states
+          day: 'ms-DatePicker-day',
+          disabled: 'ms-DatePicker-day--disabled',
+          selected: 'ms-DatePicker-day--selected',
+          highlighted: 'ms-DatePicker-day--highlighted',
+          now: 'ms-DatePicker-day--today',
+          infocus: 'ms-DatePicker-day--infocus',
+          outfocus: 'ms-DatePicker-day--outfocus',
 
-            // The picker header
-            header: 'ms-DatePicker-header',
+        }
+      },options||{}));
+      var $picker = $dateField.pickadate('picker');
 
-            // Month & year labels
-            month: 'ms-DatePicker-month',
-            year: 'ms-DatePicker-year',
-
-            // Table of dates
-            table: 'ms-DatePicker-table',
-
-            // Weekday labels
-            weekdays: 'ms-DatePicker-weekday',
-
-            // Day states
-            day: 'ms-DatePicker-day',
-            disabled: 'ms-DatePicker-day--disabled',
-            selected: 'ms-DatePicker-day--selected',
-            now: 'ms-DatePicker-day--today',
-            infocus: 'ms-DatePicker-day--infocus',
-            outfocus: 'ms-DatePicker-day--outfocus'
-          }
-        });
-        var $picker = $dateField.pickadate('picker');
-
-        /** Respond to built-in picker events. */
-        $picker.on({
-          render: function() {
-            updateCustomView($datePicker);
-          },
-          open: function() {
-            scrollUp($datePicker);
-          }
-        });
-
+      /** Respond to built-in picker events. */
+      $picker.on({
+        render: function() {
+          updateCustomView($datePicker);
+        },
+        open: function() {
+          scrollUp($datePicker);
+        }
       });
-    }
 
-    return datePicker;
+    });
   };
 
   /**
-   * Create the body of the DatePicker plugin and
-   * append it to the date picker element
-   * @param {object} $datePicker JQuery object
-   * @param {array} optionMonths
-   */
-  function appendElements($datePicker, optionMonths) {
-    var elements = '<div class="ms-TextField">';
-    elements += '<label class="ms-Label"></label>';
-    elements += '<i class="ms-DatePicker-event ms-Icon ms-Icon--event"></i>';
-    elements += '<input class="ms-TextField-field" type="text">';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-monthComponents">';
-    elements += '<span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '<div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>';
-    elements += '</div>';
-    elements += '<span class="ms-DatePicker-goToday js-goToday">Go to today</span>';
-    elements += '<div class="ms-DatePicker-monthPicker">';
-    elements += '<div class="ms-DatePicker-header">';
-    elements += '<div class="ms-DatePicker-yearComponents">';
-    elements += '<span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-currentYear js-showYearPicker"></div>';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-optionGrid">';
-    elements += '</div></div>';
-    elements += '<div class="ms-DatePicker-yearPicker">';
-    elements += '<div class="ms-DatePicker-decadeComponents">';
-    elements += '<span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '</div></div>';
-    $datePicker.append(elements);
-    $datePicker.find('.ms-DatePicker-optionGrid').append(createMonthOptions(optionMonths));
-  }
-  /**
-   * creates month elements for the month grid
-   * @param {array} optionMonths
-   * @returns {string}
-   */
-  function createMonthOptions(optionMonths) {
-    var i = 0;
-    var content = "";
-    for(i; i < 12; i++) {
-      content += '<span class="ms-DatePicker-monthOption js-changeDate" data-month="' + i + '">' + optionMonths[i] + '</span>';
-    }
-    return content;
-  }
-  /**
    * After the Pickadate plugin starts, this function
@@ -320,4 +241,6 @@ * adds additional controls to the picker view.
 
+
   /** Whenever the picker renders, do our own rendering on the custom controls. */
   function updateCustomView($datePicker) {
+
     /** Get some variables ready. */
@@ -347,3 +270,3 @@ var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
     output += '<div class="ms-DatePicker-optionGrid">';
-    for (year = startingYear; year < (startingYear + 12); year++) {
+    for (var year = startingYear; year < (startingYear + 12); year++) {
       output += '<span class="ms-DatePicker-yearOption js-changeDate" data-year="' + year + '">' + year +'</span>';
@@ -360,3 +283,3 @@ }
   }
-
+  
   /** Scroll the page up so that the field the date picker is attached to is at the top. */
@@ -369,2 +292,2 @@ function scrollUp($datePicker) {
 
-})(jQuery);
+})(jQuery);

dist/components/Dropdown/Jquery.Dropdown.js

@@ -58,2 +58,7 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
                     $dropdownWrapper.toggleClass('is-open');
+                    $('.ms-Dropdown').each(function(){
+                        if ($(this)[0] !== $dropdownWrapper[0]) {
+                            $(this).removeClass('is-open');
+                        }
+                    });
 
@@ -60,0 +65,0 @@ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */

dist/components/NavBar/Jquery.NavBar.js

@@ -29,2 +29,3 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
       $navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) {
+        var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
         event.stopPropagation();
@@ -41,3 +42,3 @@
         // Close and blur the search box if it doesn't have text.
-        if ($navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field').val().length === 0) {
+        if ($searchBox.length > 0 && $searchBox.val().length === 0) {
           $('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
@@ -83,6 +84,7 @@ }
       $(document).on('click', 'html', function(event) {
+		var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');  
         $navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open');
 
         // Close and blur the search box if it doesn't have text.
-        if ($navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field').val().length === 0) {
+        if ($searchBox.length > 0 && $searchBox.val().length === 0) {
           $navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
@@ -89,0 +91,0 @@ }

dist/components/Panel/Jquery.Panel.js

@@ -14,2 +14,12 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
+    var pfx = ["webkit", "moz", "MS", "o", ""];
+
+    // Prefix function
+    function prefixedEvent(element, type, callback) {
+      for (var p = 0; p < pfx.length; p++) {
+        if (!pfx[p]) type = type.toLowerCase();
+        element.addEventListener(pfx[p]+type, callback, false);
+      }
+    }
+
     /** Go through each panel we've been given. */
@@ -22,12 +32,28 @@ return this.each(function () {
       /** Hook to open the panel. */
-      $(".js-togglePanel").on("click", function() {
-        // Panel must be set to display "block" in order for animations to render
-        $panelMain.css({display: "block"});
-        $panel.toggleClass("is-open");
+      $(".ms-PanelAction-close").on("click", function() {
+
+        // Display Panel first, to allow animations
+        $panel.addClass("ms-Panel-animateOut");
+
       });
 
-      $panelMain.on("animationend webkitAnimationEnd MSAnimationEnd", function(event) {
-        if (event.originalEvent.animationName === "fadeOut") {
+      $(".ms-PanelAction-open").on("click", function() {
+
+        // Display Panel first, to allow animations
+        $panel.addClass("is-open");
+
+        // Add animation class
+        $panel.addClass("ms-Panel-animateIn");
+
+      });
+
+      prefixedEvent($panelMain[0], 'AnimationEnd', function(event) {
+        if (event.animationName.indexOf('Out') > -1) {
+
           // Hide and Prevent ms-Panel-main from being interactive
-          $(this).css({display: "none"});
+          $panel.removeClass('is-open');
+
+          // Remove animating classes for the next time we open panel
+          $panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut');
+
         }
@@ -34,0 +60,0 @@ });

dist/components/PersonaCard/Jquery.PersonaCard.js

@@ -27,4 +27,3 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
         /** Function for switching selected item into view by adding a class to ul. */
-        var updateForItem = function(item){
-          var wrapper = document.getElementById("detailList");
+        var updateForItem = function(wrapper, item){
           var previousItem = wrapper.className + "";
@@ -42,3 +41,3 @@ var detail = item.charAt(0).toUpperCase() + item.slice(1);
         /** Add detail class to ul to switch it into view. */
-        updateForItem(el);
+        updateForItem($(this).parent().next().find('#detailList')[0], el);
 
@@ -45,0 +44,0 @@ /** Display the corresponding details. */

dist/components/ProgressIndicator/ProgressIndicator.json

 {
-  "name": "OperationMonitor",
+  "name": "ProgressIndicator",
   "notes": "A component for outputting determinate progress",
@@ -4,0 +4,0 @@ "template": "ProgressIndicator.html",

dist/components/SearchBox/Jquery.SearchBox.js

@@ -18,5 +18,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
       var cancel = false;
+      var $searchField = $(this).find('.ms-SearchBox-field');
 
       /** SearchBox focus - hide label and show cancel button */
-      $(this).find('.ms-SearchBox-field').on('focus', function() {
+      $searchField.on('focus', function() {
         /** Hide the label on focus. */
@@ -28,3 +29,11 @@ $(this).siblings('.ms-SearchBox-label').hide();
 
+      /** 'hovering' class allows for more fine grained control of hover state */
+      $searchField.on('mouseover', function() {
+        $searchField.addClass('hovering')
+      });
 
+      $searchField.on('mouseout', function() {
+        $searchField.removeClass('hovering');
+      });
+
       // If cancel button is selected, change cancel value to true
@@ -39,10 +48,14 @@ $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() {
         // If cancel button is selected remove the text and show the label
-        if ( cancel == true ) {
+        if (cancel) {
           $(this).val('');
-          $(this).siblings('.ms-SearchBox-label').show();
+          $searchField.addClass('hovering');
         }
-
-        // Remove is-active class - hides cancel button
-        $(this).parent('.ms-SearchBox').removeClass('is-active');
-
+        
+        var $searchBox = $(this).parent('.ms-SearchBox');
+        // Prevents inputfield from gaining focus too soon
+        setTimeout(function() {
+          // Remove is-active class - hides cancel button
+          $searchBox.removeClass('is-active');
+        }, 10);
+        
         /** Only do this if no text was entered. */
@@ -56,4 +69,2 @@ if ($(this).val().length === 0 ) {
       });
-
-
     });
@@ -60,0 +71,0 @@

dist/components/Spinner/Spinner.js

@@ -17,13 +17,10 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
  * @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
- * @param {string} type - The type of spinner. Set this property to "sixteen" for sixteen dot version. The default is eight.
  */
 
-fabric.Spinner = function(target, spinnerType) {
+fabric.Spinner = function(target) {
 
     var _target = target;
-    var _spinnerType = spinnerType || "eight";
-    var eightSize = 0.18;
-    var sixteenSize = 0.1;
+    var eightSize = 0.179;
     var circleObjects = [];
-    var animationSpeed = 100;
+    var animationSpeed = 90;
     var interval;
@@ -33,2 +30,3 @@ var spinner;
     var offsetSize;
+    var fadeIncrement = 0;
 
@@ -59,9 +57,4 @@ /**
     function _init() {
-        if(_spinnerType === "sixteen") {
-            offsetSize = sixteenSize;
-            numCircles = 16;
-        } else {
-            offsetSize = eightSize;
-            numCircles = 8;
-        }
+        offsetSize = eightSize;
+        numCircles = 8;
         _createCirclesAndArrange();
@@ -73,8 +66,11 @@ _initializeOpacities();
     function _initializeOpacities() {
-        var i = numCircles, j;
-        while(i--) {
-            j = circleObjects.length;
-            while(j--) {
-                _fade(circleObjects[j]);
-            }
+        var i = 0;
+        var j = 1;
+        var opacity;
+        fadeIncrement = 1 / numCircles;
+
+        for (i; i < numCircles; i++) {
+            var circleObject = circleObjects[i];
+            opacity = (fadeIncrement * j++);
+            _setOpacity(circleObject.element, opacity);
         }
@@ -84,15 +80,9 @@ }
     function _fade(circleObject) {
-        var opacity;
-        if(circleObject.j < numCircles) {
-            if(Math.floor(circleObject.j / (numCircles / 2))) {
-                opacity = _getOpacity(circleObject.element) - 2 / numCircles;
-            } else{
-                opacity = _getOpacity(circleObject.element) + 2 / numCircles;
-            }
-        } else {
-            circleObject.j = 0;
-            opacity = 2/ numCircles;
+        var opacity = _getOpacity(circleObject.element) - fadeIncrement;
+
+        if (opacity <= 0) {
+            opacity = 1;
         }
+
         _setOpacity(circleObject.element, opacity);
-        circleObject.j++;
     }
@@ -118,3 +108,3 @@
         //for backwards compatibility
-        if (_target.className !== "ms-Spinner") {
+        if (_target.className.indexOf("ms-Spinner") === -1) {
             spinner = document.createElement("div");
@@ -126,3 +116,3 @@ spinner.className = "ms-Spinner";
         }
-        
+
         var width = spinner.clientWidth;
@@ -136,3 +126,4 @@ var height = spinner.clientHeight;
         var radius = (width- offset) * 0.5;
-        while(i--) {
+
+        while (i--) {
             var circle = _createCircle();
@@ -139,0 +130,0 @@ var x = Math.round(width * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;

dist/components/Spinner/Spinner.json

@@ -5,3 +5,28 @@ {
   "template": "Spinner.html",
-  "class": "ms-Spinner"
+  "class": "ms-Spinner",
+  "wrapBranches": true,
+  "fileOrder": [
+    "Spinner.html",
+    "Spinner.Large.html",
+    "Spinner.Message.html",
+    "Spinner.Message.Large.html"
+  ],
+  "branches": [
+    {
+      "name": "Standard",
+      "default": true
+    },
+    {
+      "name": "Large",
+      "class": "ms-Spinner--large"
+    },
+    {
+      "name": "Standard with message ",
+      "class": "ms-Spinner"
+    },
+    {
+      "name": "Large with message",
+      "class": "ms-Spinner--large"
+    }
+  ]
 }

dist/js/jquery.fabric.min.js

@@ -1,3 +0,2 @@
-//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-!function(e){e.fn.CommandBar=function(){var t=function(e,t,n){var i='<li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link"" href="#">';return i+=e,i+="</a></li>"},n=function(t,n,i){var s=[];return t.each(function(t){var a=e(this),o=a.offset().left+a.outerWidth()+n+10-i.offset().left;s.push({jquery:a,rightOffset:o})}),s},s=function(e,t){for(var n=[],i=0;i<e.length;i++){var s=e[i].jquery,a=e[i].rightOffset;s.hasClass("ms-CommandBarItem-overflow")||(a>t?n.push(s):s.removeClass("is-hidden"))}return n},a=function(n,s,a){var o="";if(n.length>0){for(s.addClass("is-visible"),a.html(""),i=0;i<n.length;i++){var r=e(n[i]);r.addClass("is-hidden");var c=r.find(".ms-CommandBarItem-commandText").text();o+=t(c)}a.html(o)}else s.removeClass("is-visible")};return this.each(function(){var t,i,o=e(this),r=o.find(".ms-CommandBar-mainArea"),c=r.find(".ms-CommandBarItem"),l=o.find(".ms-CommandBarItem-overflow"),d=o.find(".ms-CommandBarItem-overflow").outerWidth(),u=o.find(".ms-CommandBar-overflowMenu"),m=o.find(".ms-CommandBarSearch"),h=!1;i=n(c,d,r),t=s(i,r.innerWidth()),a(t,l,u),e(window).width()<640&&e(".ms-CommandBarSearch").click(function(){e(this).addClass("is-active")}),e(window).resize(function(){var t;t=s(i,r.innerWidth()),a(t,l,u),e(window).width()<640&&0==h?(i=n(c,d,r),h=!0,e(".ms-CommandBarSearch").unbind(),e(".ms-CommandBarSearch").click(function(){e(this).addClass("is-active")})):e(window).width()>639&&1==h&&(i=n(c,d,r),h=!1,e(".ms-CommandBarSearch").unbind())}),l.click(function(){u.toggleClass("is-open")}),m.find(".ms-CommandBarSearch-input").click(function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")}),m.find(".ms-CommandBarSearch-iconClearWrapper").click(function(){var t=e(this).parent().find(".ms-CommandBarSearch-input");t.val(""),t.parent().removeClass("is-active")}),m.parent().find(".ms-CommandBarSearch-input").blur(function(){var t=e(this);t.val(""),t.parent().removeClass("is-active")})})}}(jQuery),function(e){e.fn.ContextualMenu=function(){return this.each(function(){var t=e(this);t.on("click",".ms-ContextualMenu-link:not(.is-disabled)",function(n){n.preventDefault(),t.hasClass("ms-ContextualMenu--multiselect")?e(this).hasClass("is-selected")?e(this).removeClass("is-selected"):e(this).addClass("is-selected"):(e(".ms-ContextualMenu-link").removeClass("is-selected").siblings(".ms-ContextualMenu").removeClass("is-open"),e(this).addClass("is-selected"),e(this).hasClass("ms-ContextualMenu-link--hasMenu")&&(e(this).siblings(".ms-ContextualMenu:first").addClass("is-open"),n.stopPropagation()))})})}}(jQuery),function(e){function t(e,t){var i='<div class="ms-TextField">';i+='<label class="ms-Label"></label>',i+='<i class="ms-DatePicker-event ms-Icon ms-Icon--event"></i>',i+='<input class="ms-TextField-field" type="text">',i+="</div>",i+='<div class="ms-DatePicker-monthComponents">',i+='<span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--chevronRight"></i></span>',i+='<span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>',i+='<div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>',i+="</div>",i+='<span class="ms-DatePicker-goToday js-goToday">Go to today</span>',i+='<div class="ms-DatePicker-monthPicker">',i+='<div class="ms-DatePicker-header">',i+='<div class="ms-DatePicker-yearComponents">',i+='<span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--chevronRight"></i></span>',i+='<span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>',i+="</div>",i+='<div class="ms-DatePicker-currentYear js-showYearPicker"></div>',i+="</div>",i+='<div class="ms-DatePicker-optionGrid">',i+="</div></div>",i+='<div class="ms-DatePicker-yearPicker">',i+='<div class="ms-DatePicker-decadeComponents">',i+='<span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--chevronRight"></i></span>',i+='<span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>',i+="</div></div>",e.append(i),e.find(".ms-DatePicker-optionGrid").append(n(t))}function n(e){var t=0,n="";for(t;12>t;t++)n+='<span class="ms-DatePicker-monthOption js-changeDate" data-month="'+t+'">'+e[t]+"</span>";return n}function i(t){var n=t.find(".ms-DatePicker-monthComponents"),i=t.find(".ms-DatePicker-goToday"),o=(t.find(".ms-DatePicker-dayPicker"),t.find(".ms-DatePicker-monthPicker")),r=t.find(".ms-DatePicker-yearPicker"),c=t.find(".ms-DatePicker-wrap"),l=t.find(".ms-TextField-field").pickadate("picker");n.appendTo(c),i.appendTo(c),o.appendTo(c),r.appendTo(c),a(t),n.on("click",".js-prevMonth",function(e){e.preventDefault();var t=l.get("highlight").month-1;s(l,null,t,null)}),n.on("click",".js-nextMonth",function(e){e.preventDefault();var t=l.get("highlight").month+1;s(l,null,t,null)}),o.on("click",".js-prevYear",function(e){e.preventDefault();var t=l.get("highlight").year-1;s(l,t,null,null)}),o.on("click",".js-nextYear",function(e){e.preventDefault();var t=l.get("highlight").year+1;s(l,t,null,null)}),r.on("click",".js-prevDecade",function(e){e.preventDefault();var t=l.get("highlight").year-10;s(l,t,null,null)}),r.on("click",".js-nextDecade",function(e){e.preventDefault();var t=l.get("highlight").year+10;s(l,t,null,null)}),i.click(function(e){e.preventDefault();var n=new Date;l.set("select",[n.getFullYear(),n.getMonth(),n.getDate()]),t.removeClass("is-pickingMonths").removeClass("is-pickingYears")}),o.on("click",".js-changeDate",function(n){n.preventDefault();var i=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");s(l,i,a,o),t.hasClass("is-pickingMonths")&&t.removeClass("is-pickingMonths")}),r.on("click",".js-changeDate",function(n){n.preventDefault();var i=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");s(l,i,a,o),t.hasClass("is-pickingYears")&&t.removeClass("is-pickingYears")}),o.on("click",".js-showDayPicker",function(e){t.removeClass("is-pickingMonths"),t.removeClass("is-pickingYears")}),n.on("click",".js-showMonthPicker",function(e){t.toggleClass("is-pickingMonths")}),o.on("click",".js-showYearPicker",function(e){t.toggleClass("is-pickingYears")})}function s(e,t,n,i){null==t&&(t=e.get("highlight").year),null==n&&(n=e.get("highlight").month),null==i&&(i=e.get("highlight").date),e.set("highlight",[t,n,i])}function a(e){var t=e.find(".ms-DatePicker-monthPicker"),n=e.find(".ms-DatePicker-yearPicker"),i=(e.find(".ms-DatePicker-wrap"),e.find(".ms-TextField-field").pickadate("picker"));t.find(".ms-DatePicker-currentYear").text(i.get("view").year),t.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"),t.find('.ms-DatePicker-monthOption[data-month="'+i.get("highlight").month+'"]').addClass("is-highlighted"),n.find(".ms-DatePicker-currentDecade").remove(),n.find(".ms-DatePicker-optionGrid").remove();var s=i.get("highlight").year-11,a=s+" - "+(s+11),o='<div class="ms-DatePicker-currentDecade">'+a+"</div>";for(o+='<div class="ms-DatePicker-optionGrid">',year=s;year<s+12;year++)o+='<span class="ms-DatePicker-yearOption js-changeDate" data-year="'+year+'">'+year+"</span>";o+="</div>",n.append(o),n.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),n.find('.ms-DatePicker-yearOption[data-year="'+i.get("highlight").year+'"]').addClass("is-highlighted")}function o(t){e("html, body").animate({scrollTop:t.offset().top},367)}e.fn.DatePicker=function(n){function s(){return c.each(function(){var n=e(this);t(n,l),n.find(".ms-Label").text(d),n.find(".ms-TextField-field").attr("placeholder",u+"...");var s=n.find(".ms-TextField-field").pickadate({weekdaysShort:["S","M","T","W","T","F","S"],today:"",clear:"",close:"",onStart:function(){i(n)},klass:{input:"ms-DatePicker-input",active:"ms-DatePicker-input--active",picker:"ms-DatePicker-picker",opened:"ms-DatePicker-picker--opened",focused:"ms-DatePicker-picker--focused",holder:"ms-DatePicker-holder",frame:"ms-DatePicker-frame",wrap:"ms-DatePicker-wrap",box:"ms-DatePicker-dayPicker",header:"ms-DatePicker-header",month:"ms-DatePicker-month",year:"ms-DatePicker-year",table:"ms-DatePicker-table",weekdays:"ms-DatePicker-weekday",day:"ms-DatePicker-day",disabled:"ms-DatePicker-day--disabled",selected:"ms-DatePicker-day--selected",now:"ms-DatePicker-day--today",infocus:"ms-DatePicker-day--infocus",outfocus:"ms-DatePicker-day--outfocus"}}),r=s.pickadate("picker");r.on({render:function(){a(n)},open:function(){o(n)}})})}var r,c=this,l=n&&n.optionMonths||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],d=n&&n.label||"Start Date",u=n&&n.placeholderText||"Select a date";if(e().pickadate)r=s();else{var m=document.getElementsByTagName("script")[0],h=document.createElement("script");h.onload=s,h.src="PickaDate.js",m.parentNode.insertBefore(h,m)}return r}}(jQuery),!function(e){"function"==typeof define&&define.amd?define("picker",["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):this.Picker=e(jQuery)}(function(e){function t(a,o,r,d){function u(){return t._.node("div",t._.node("div",t._.node("div",t._.node("div",C.component.nodes(g.open),y.box),y.wrap),y.frame),y.holder)}function m(){P.data(o,C).addClass(y.input).val(P.data("value")?C.get("select",k.format):a.value).on("focus."+g.id+" click."+g.id,p),k.editable||P.on("keydown."+g.id,function(e){var t=e.keyCode,n=/^(8|46)$/.test(t);return 27==t?(C.close(),!1):void((32==t||n||!g.open&&C.component.key[t])&&(e.preventDefault(),e.stopPropagation(),n?C.clear().close():C.open()))}),s(a,{haspopup:!0,expanded:!1,readonly:!1,owns:a.id+"_root"+(C._hidden?" "+C._hidden.id:"")})}function h(){C.$root.on({focusin:function(e){C.$root.removeClass(y.focused),e.stopPropagation()},"mousedown click":function(t){var n=t.target;n!=C.$root.children()[0]&&(t.stopPropagation(),"mousedown"!=t.type||e(n).is(":input")||"OPTION"==n.nodeName||(t.preventDefault(),a.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var t=e(this),n=t.data(),i=t.hasClass(y.navDisabled)||t.hasClass(y.disabled),s=document.activeElement;s=s&&(s.type||s.href)&&s,(i||s&&!e.contains(C.$root[0],s))&&a.focus(),!i&&n.nav?C.set("highlight",C.component.item.highlight,{nav:n.nav}):!i&&"pick"in n?C.set("select",n.pick).close(!0):n.clear?C.clear().close(!0):n.close&&C.close(!0)}),s(C.$root[0],"hidden",!0)}function f(){var t;k.hiddenName===!0?(t=a.name,a.name=""):(t=["string"==typeof k.hiddenPrefix?k.hiddenPrefix:"","string"==typeof k.hiddenSuffix?k.hiddenSuffix:"_submit"],t=t[0]+a.name+t[1]),C._hidden=e('<input type=hidden name="'+t+'"'+(P.data("value")||a.value?' value="'+C.get("select",k.formatSubmit)+'"':"")+">")[0],P.on("change."+g.id,function(){C._hidden.value=a.value?C.get("select",k.formatSubmit):""}).after(C._hidden)}function p(e){e.stopPropagation(),"focus"==e.type&&C.$root.addClass(y.focused),C.open()}if(!a)return t;var v=!1,g={id:a.id||"P"+Math.abs(~~(Math.random()*new Date))},k=r?e.extend(!0,{},r.defaults,d):d||{},y=e.extend({},t.klasses(),k.klass),P=e(a),b=function(){return this.start()},C=b.prototype={constructor:b,$node:P,start:function(){return g&&g.start?C:(g.methods={},g.start=!0,g.open=!1,g.type=a.type,a.autofocus=a==document.activeElement,a.readOnly=!k.editable,a.id=a.id||g.id,"text"!=a.type&&(a.type="text"),C.component=new r(C,k),C.$root=e(t._.node("div",u(),y.picker,'id="'+a.id+'_root"')),h(),k.formatSubmit&&f(),m(),k.container?e(k.container).append(C.$root):P.after(C.$root),C.on({start:C.component.onStart,render:C.component.onRender,stop:C.component.onStop,open:C.component.onOpen,close:C.component.onClose,set:C.component.onSet}).on({start:k.onStart,render:k.onRender,stop:k.onStop,open:k.onOpen,close:k.onClose,set:k.onSet}),v=n(C.$root.children()[0]),a.autofocus&&C.open(),C.trigger("start").trigger("render"))},render:function(e){return e?C.$root.html(u()):C.$root.find("."+y.box).html(C.component.nodes(g.open)),C.trigger("render")},stop:function(){return g.start?(C.close(),C._hidden&&C._hidden.parentNode.removeChild(C._hidden),C.$root.remove(),P.removeClass(y.input).removeData(o),setTimeout(function(){P.off("."+g.id)},0),a.type=g.type,a.readOnly=!1,C.trigger("stop"),g.methods={},g.start=!1,C):C},open:function(n){return g.open?C:(P.addClass(y.active),s(a,"expanded",!0),setTimeout(function(){C.$root.addClass(y.opened),s(C.$root[0],"hidden",!1)},0),n!==!1&&(g.open=!0,v&&l.css("overflow","hidden").css("padding-right","+="+i()),P.trigger("focus"),c.on("click."+g.id+" focusin."+g.id,function(e){var t=e.target;t!=a&&t!=document&&3!=e.which&&C.close(t===C.$root.children()[0])}).on("keydown."+g.id,function(n){var i=n.keyCode,s=C.component.key[i],o=n.target;27==i?C.close(!0):o!=a||!s&&13!=i?e.contains(C.$root[0],o)&&13==i&&(n.preventDefault(),o.click()):(n.preventDefault(),s?t._.trigger(C.component.key.go,C,[t._.trigger(s)]):C.$root.find("."+y.highlighted).hasClass(y.disabled)||C.set("select",C.component.item.highlight).close())})),C.trigger("open"))},close:function(e){return e&&(P.off("focus."+g.id).trigger("focus"),setTimeout(function(){P.on("focus."+g.id,p)},0)),P.removeClass(y.active),s(a,"expanded",!1),setTimeout(function(){C.$root.removeClass(y.opened+" "+y.focused),s(C.$root[0],"hidden",!0)},0),g.open?(g.open=!1,v&&l.css("overflow","").css("padding-right","-="+i()),c.off("."+g.id),C.trigger("close")):C},clear:function(e){return C.set("clear",null,e)},set:function(t,n,i){var s,a,o=e.isPlainObject(t),r=o?t:{};if(i=o&&e.isPlainObject(n)?n:i||{},t){o||(r[t]=n);for(s in r)a=r[s],s in C.component.item&&(void 0===a&&(a=null),C.component.set(s,a,i)),("select"==s||"clear"==s)&&P.val("clear"==s?"":C.get(s,k.format)).trigger("change");C.render()}return i.muted?C:C.trigger("set",r)},get:function(e,n){if(e=e||"value",null!=g[e])return g[e];if("value"==e)return a.value;if(e in C.component.item){if("string"==typeof n){var i=C.component.get(e);return i?t._.trigger(C.component.formats.toString,C.component,[n,i]):""}return C.component.get(e)}},on:function(t,n,i){var s,a,o=e.isPlainObject(t),r=o?t:{};if(t){o||(r[t]=n);for(s in r)a=r[s],i&&(s="_"+s),g.methods[s]=g.methods[s]||[],g.methods[s].push(a)}return C},off:function(){var e,t,n=arguments;for(e=0,namesCount=n.length;namesCount>e;e+=1)t=n[e],t in g.methods&&delete g.methods[t];return C},trigger:function(e,n){var i=function(e){var i=g.methods[e];i&&i.map(function(e){t._.trigger(e,C,[n])})};return i("_"+e),i(e),C}};return new b}function n(e){var t,n="position";return e.currentStyle?t=e.currentStyle[n]:window.getComputedStyle&&(t=getComputedStyle(e)[n]),"fixed"==t}function i(){if(l.height()<=r.height())return 0;var t=e('<div style="visibility:hidden;width:100px" />').appendTo("body"),n=t[0].offsetWidth;t.css("overflow","scroll");var i=e('<div style="width:100%" />').appendTo(t),s=i[0].offsetWidth;return t.remove(),n-s}function s(t,n,i){if(e.isPlainObject(n))for(var s in n)a(t,s,n[s]);else a(t,n,i)}function a(e,t,n){e.setAttribute(("role"==t?"":"aria-")+t,n)}function o(t,n){e.isPlainObject(t)||(t={attribute:n}),n="";for(var i in t){var s=("role"==i?"":"aria-")+i,a=t[i];n+=null==a?"":s+'="'+t[i]+'"'}return n}var r=e(window),c=e(document),l=e(document.documentElement);return t.klasses=function(e){return e=e||"picker",{picker:e,opened:e+"--opened",focused:e+"--focused",input:e+"__input",active:e+"__input--active",holder:e+"__holder",frame:e+"__frame",wrap:e+"__wrap",box:e+"__box"}},t._={group:function(e){for(var n,i="",s=t._.trigger(e.min,e);s<=t._.trigger(e.max,e,[s]);s+=e.i)n=t._.trigger(e.item,e,[s]),i+=t._.node(e.node,n[0],n[1],n[2]);return i},node:function(t,n,i,s){return n?(n=e.isArray(n)?n.join(""):n,i=i?' class="'+i+'"':"",s=s?" "+s:"","<"+t+i+s+">"+n+"</"+t+">"):""},lead:function(e){return(10>e?"0":"")+e},trigger:function(e,t,n){return"function"==typeof e?e.apply(t,n||[]):e},digits:function(e){return/\d/.test(e[1])?2:1},isDate:function(e){return{}.toString.call(e).indexOf("Date")>-1&&this.isInteger(e.getUTCDate())},isInteger:function(e){return{}.toString.call(e).indexOf("Number")>-1&&e%1===0},ariaAttr:o},t.extend=function(n,i){e.fn[n]=function(s,a){var o=this.data(n);return"picker"==s?o:o&&"string"==typeof s?t._.trigger(o[s],o,[a]):this.each(function(){var a=e(this);a.data(n)||new t(this,n,i,s)})},e.fn[n].defaults=i.defaults},t}),function(e){"function"==typeof define&&define.amd?define(["picker","jquery"],e):"object"==typeof exports?module.exports=e(require("./picker.js"),require("jquery")):e(Picker,jQuery)}(function(e,t){function n(e,t){var n=this,i=e.$node[0],s=i.value,a=e.$node.data("value"),o=a||s,r=a?t.formatSubmit:t.format,c=function(){return i.currentStyle?"rtl"==i.currentStyle.direction:"rtl"==getComputedStyle(e.$root[0]).direction};n.settings=t,n.$node=e.$node,n.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},n.item={},n.item.clear=null,n.item.disable=(t.disable||[]).slice(0),n.item.enable=-function(e){return e[0]===!0?e.shift():-1}(n.item.disable),n.set("min",t.min).set("max",t.max).set("now"),o?n.set("select",o,{format:r}):n.set("select",null).set("highlight",n.item.now),n.key={40:7,38:-7,39:function(){return c()?-1:1},37:function(){return c()?1:-1},go:function(e){var t=n.item.highlight,i=new Date(Date.UTC(t.year,t.month,t.date+e));n.set("highlight",i,{interval:e}),this.render()}},e.on("render",function(){e.$root.find("."+t.klass.selectMonth).on("change",function(){var n=this.value;n&&(e.set("highlight",[e.get("view").year,n,e.get("highlight").date]),e.$root.find("."+t.klass.selectMonth).trigger("focus"))}),e.$root.find("."+t.klass.selectYear).on("change",function(){var n=this.value;n&&(e.set("highlight",[n,e.get("view").month,e.get("highlight").date]),e.$root.find("."+t.klass.selectYear).trigger("focus"))})},1).on("open",function(){var i="";n.disabled(n.get("now"))&&(i=":not(."+t.klass.buttonToday+")"),e.$root.find("button"+i+", select").attr("disabled",!1)},1).on("close",function(){e.$root.find("button, select").attr("disabled",!0)},1)}var i=7,s=6,a=e._;n.prototype.set=function(e,t,n){var i=this,s=i.item;return null===t?("clear"==e&&(e="select"),s[e]=t,i):(s["enable"==e?"disable":"flip"==e?"enable":e]=i.queue[e].split(" ").map(function(s){return t=i[s](e,t,n)}).pop(),"select"==e?i.set("highlight",s.select,n):"highlight"==e?i.set("view",s.highlight,n):e.match(/^(flip|min|max|disable|enable)$/)&&(s.select&&i.disabled(s.select)&&i.set("select",s.select,n),s.highlight&&i.disabled(s.highlight)&&i.set("highlight",s.highlight,n)),i)},n.prototype.get=function(e){return this.item[e]},n.prototype.create=function(e,n,i){var s,o=this;return n=void 0===n?e:n,n==-1/0||1/0==n?s=n:t.isPlainObject(n)&&a.isInteger(n.pick)?n=n.obj:t.isArray(n)?(n=new Date(Date.UTC(n[0],n[1],n[2])),n=a.isDate(n)?n:o.create().obj):n=a.isInteger(n)?o.normalize(new Date(n),i):a.isDate(n)?o.normalize(n,i):o.now(e,n,i),{year:s||n.getUTCFullYear(),month:s||n.getUTCMonth(),date:s||n.getUTCDate(),day:s||n.getUTCDay(),obj:s||n,pick:s||n.getTime()}},n.prototype.createRange=function(e,n){var i=this,s=function(e){return e===!0||t.isArray(e)||a.isDate(e)?i.create(e):e};return a.isInteger(e)||(e=s(e)),a.isInteger(n)||(n=s(n)),a.isInteger(e)&&t.isPlainObject(n)?e=[n.year,n.month,n.date+e]:a.isInteger(n)&&t.isPlainObject(e)&&(n=[e.year,e.month,e.date+n]),{from:s(e),to:s(n)}},n.prototype.withinRange=function(e,t){return e=this.createRange(e.from,e.to),t.pick>=e.from.pick&&t.pick<=e.to.pick},n.prototype.overlapRanges=function(e,t){var n=this;return e=n.createRange(e.from,e.to),t=n.createRange(t.from,t.to),n.withinRange(e,t.from)||n.withinRange(e,t.to)||n.withinRange(t,e.from)||n.withinRange(t,e.to)},n.prototype.now=function(e,t,n){return t=new Date,n&&n.rel&&t.setUTCDate(t.getUTCDate()+n.rel),this.normalize(t,n)},n.prototype.navigate=function(e,n,i){var s,a,o,r,c=t.isArray(n),l=t.isPlainObject(n),d=this.item.view;if(c||l){for(l?(a=n.year,o=n.month,r=n.date):(a=+n[0],o=+n[1],r=+n[2]),i&&i.nav&&d&&d.month!==o&&(a=d.year,o=d.month),s=new Date(Date.UTC(a,o+(i&&i.nav?i.nav:0),1)),a=s.getUTCFullYear(),o=s.getUTCMonth();new Date(Date.UTC(a,o,r)).getUTCMonth()!==o;)r-=1;n=[a,o,r]}return n},n.prototype.normalize=function(e){return e.setUTCHours(0,0,0,0),e},n.prototype.measure=function(e,t){var n=this;return t?"string"==typeof t?t=n.parse(e,t):a.isInteger(t)&&(t=n.now(e,t,{rel:t})):t="min"==e?-1/0:1/0,t},n.prototype.viewset=function(e,t){return this.create([t.year,t.month,1])},n.prototype.validate=function(e,n,i){var s,o,r,c,l=this,d=n,u=i&&i.interval?i.interval:1,m=-1===l.item.enable,h=l.item.min,f=l.item.max,p=m&&l.item.disable.filter(function(e){if(t.isArray(e)){var i=l.create(e).pick;i<n.pick?s=!0:i>n.pick&&(o=!0)}return a.isInteger(e)}).length;if((!i||!i.nav)&&(!m&&l.disabled(n)||m&&l.disabled(n)&&(p||s||o)||!m&&(n.pick<=h.pick||n.pick>=f.pick)))for(m&&!p&&(!o&&u>0||!s&&0>u)&&(u*=-1);l.disabled(n)&&(Math.abs(u)>1&&(n.month<d.month||n.month>d.month)&&(n=d,u=u>0?1:-1),n.pick<=h.pick?(r=!0,u=1,n=l.create([h.year,h.month,h.date+(n.pick===h.pick?0:-1)])):n.pick>=f.pick&&(c=!0,u=-1,n=l.create([f.year,f.month,f.date+(n.pick===f.pick?0:1)])),!r||!c);)n=l.create([n.year,n.month,n.date+u]);return n},n.prototype.disabled=function(e){var n=this,i=n.item.disable.filter(function(i){return a.isInteger(i)?e.day===(n.settings.firstDay?i:i-1)%7:t.isArray(i)||a.isDate(i)?e.pick===n.create(i).pick:t.isPlainObject(i)?n.withinRange(i,e):void 0});return i=i.length&&!i.filter(function(e){return t.isArray(e)&&"inverted"==e[3]||t.isPlainObject(e)&&e.inverted}).length,-1===n.item.enable?!i:i||e.pick<n.item.min.pick||e.pick>n.item.max.pick},n.prototype.parse=function(e,t,n){var i=this,s={};return t&&"string"==typeof t?(n&&n.format||(n=n||{},n.format=i.settings.format),i.formats.toArray(n.format).map(function(e){var n=i.formats[e],o=n?a.trigger(n,i,[t,s]):e.replace(/^!/,"").length;n&&(s[e]=t.substr(0,o)),t=t.substr(o)}),[s.yyyy||s.yy,+(s.mm||s.m)-1,s.dd||s.d]):t},n.prototype.formats=function(){function e(e,t,n){var i=e.match(/\w+/)[0];return n.mm||n.m||(n.m=t.indexOf(i)+1),i.length}function t(e){return e.match(/\w+/)[0].length}return{d:function(e,t){return e?a.digits(e):t.date},dd:function(e,t){return e?2:a.lead(t.date)},ddd:function(e,n){return e?t(e):this.settings.weekdaysShort[n.day]},dddd:function(e,n){return e?t(e):this.settings.weekdaysFull[n.day]},m:function(e,t){return e?a.digits(e):t.month+1},mm:function(e,t){return e?2:a.lead(t.month+1)},mmm:function(t,n){var i=this.settings.monthsShort;return t?e(t,i,n):i[n.month]},mmmm:function(t,n){var i=this.settings.monthsFull;return t?e(t,i,n):i[n.month]},yy:function(e,t){return e?2:(""+t.year).slice(2)},yyyy:function(e,t){return e?4:t.year},toArray:function(e){return e.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(e,t){var n=this;return n.formats.toArray(e).map(function(e){return a.trigger(n.formats[e],n,[0,t])||e.replace(/^!/,"")}).join("")}}}(),n.prototype.isDateExact=function(e,n){var i=this;return a.isInteger(e)&&a.isInteger(n)||"boolean"==typeof e&&"boolean"==typeof n?e===n:(a.isDate(e)||t.isArray(e))&&(a.isDate(n)||t.isArray(n))?i.create(e).pick===i.create(n).pick:t.isPlainObject(e)&&t.isPlainObject(n)?i.isDateExact(e.from,n.from)&&i.isDateExact(e.to,n.to):!1},n.prototype.isDateOverlap=function(e,n){var i=this,s=i.settings.firstDay?1:0;return a.isInteger(e)&&(a.isDate(n)||t.isArray(n))?(e=e%7+s,e===i.create(n).day+1):a.isInteger(n)&&(a.isDate(e)||t.isArray(e))?(n=n%7+s,n===i.create(e).day+1):t.isPlainObject(e)&&t.isPlainObject(n)?i.overlapRanges(e,n):!1},n.prototype.flipEnable=function(e){var t=this.item;t.enable=e||(-1==t.enable?1:-1)},n.prototype.deactivate=function(e,n){var i=this,s=i.item.disable.slice(0);return"flip"==n?i.flipEnable():n===!1?(i.flipEnable(1),s=[]):n===!0?(i.flipEnable(-1),s=[]):n.map(function(e){for(var n,o=0;o<s.length;o+=1)if(i.isDateExact(e,s[o])){n=!0;break}n||(a.isInteger(e)||a.isDate(e)||t.isArray(e)||t.isPlainObject(e)&&e.from&&e.to)&&s.push(e)}),s},n.prototype.activate=function(e,n){var i=this,s=i.item.disable,o=s.length;return"flip"==n?i.flipEnable():n===!0?(i.flipEnable(1),s=[]):n===!1?(i.flipEnable(-1),s=[]):n.map(function(e){var n,r,c,l;for(c=0;o>c;c+=1){if(r=s[c],i.isDateExact(r,e)){n=s[c]=null,l=!0;break}if(i.isDateOverlap(r,e)){t.isPlainObject(e)?(e.inverted=!0,n=e):t.isArray(e)?(n=e,n[3]||n.push("inverted")):a.isDate(e)&&(n=[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),"inverted"]);break}}if(n)for(c=0;o>c;c+=1)if(i.isDateExact(s[c],e)){s[c]=null;break}if(l)for(c=0;o>c;c+=1)if(i.isDateOverlap(s[c],e)){s[c]=null;break}n&&s.push(n)}),s.filter(function(e){return null!=e})},n.prototype.nodes=function(e){var t=this,n=t.settings,o=t.item,r=o.now,c=o.select,l=o.highlight,d=o.view,u=o.disable,m=o.min,h=o.max,f=function(e,t){return n.firstDay&&(e.push(e.shift()),t.push(t.shift())),a.node("thead",a.node("tr",a.group({min:0,max:i-1,i:1,node:"th",item:function(i){return[e[i],n.klass.weekdays,'scope=col title="'+t[i]+'"']}})))}((n.showWeekdaysFull?n.weekdaysFull:n.weekdaysShort).slice(0),n.weekdaysFull.slice(0)),p=function(e){return a.node("div"," ",n.klass["nav"+(e?"Next":"Prev")]+(e&&d.year>=h.year&&d.month>=h.month||!e&&d.year<=m.year&&d.month<=m.month?" "+n.klass.navDisabled:""),"data-nav="+(e||-1)+" "+a.ariaAttr({role:"button",components:t.$node[0].id+"_table"})+' title="'+(e?n.labelMonthNext:n.labelMonthPrev)+'"')},v=function(){var i=n.showMonthsShort?n.monthsShort:n.monthsFull;return n.selectMonths?a.node("select",a.group({min:0,max:11,i:1,node:"option",item:function(e){return[i[e],0,"value="+e+(d.month==e?" selected":"")+(d.year==m.year&&e<m.month||d.year==h.year&&e>h.month?" disabled":"")]}}),n.klass.selectMonth,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+n.labelMonthSelect+'"'):a.node("div",i[d.month],n.klass.month)},g=function(){var i=d.year,s=n.selectYears===!0?5:~~(n.selectYears/2);if(s){var o=m.year,r=h.year,c=i-s,l=i+s;if(o>c&&(l+=o-c,c=o),l>r){var u=c-o,f=l-r;c-=u>f?f:u,l=r}return a.node("select",a.group({min:c,max:l,i:1,node:"option",item:function(e){return[e,0,"value="+e+(i==e?" selected":"")]}}),n.klass.selectYear,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+n.labelYearSelect+'"')}return a.node("div",i,n.klass.year)};return a.node("div",(n.selectYears?g()+v():v()+g())+p()+p(1),n.klass.header)+a.node("table",f+a.node("tbody",a.group({min:0,max:s-1,i:1,node:"tr",item:function(e){var s=n.firstDay&&0===t.create([d.year,d.month,1]).day?-7:0;return[a.group({min:i*e-d.day+s+1,max:function(){return this.min+i-1},i:1,node:"td",item:function(e){e=t.create([d.year,d.month,e+(n.firstDay?1:0)]);var i=c&&c.pick==e.pick,s=l&&l.pick==e.pick,o=u&&t.disabled(e)||e.pick<m.pick||e.pick>h.pick;return[a.node("div",e.date,function(t){return t.push(d.month==e.month?n.klass.infocus:n.klass.outfocus),r.pick==e.pick&&t.push(n.klass.now),i&&t.push(n.klass.selected),s&&t.push(n.klass.highlighted),o&&t.push(n.klass.disabled),t.join(" ")}([n.klass.day]),"data-pick="+e.pick+" "+a.ariaAttr({role:"gridcell",selected:i&&t.$node.val()===a.trigger(t.formats.toString,t,[n.format,e])?!0:null,activedescendant:s?!0:null,disabled:o?!0:null})),"",a.ariaAttr({role:"presentation"})]}})]}})),n.klass.table,'id="'+t.$node[0].id+'_table" '+a.ariaAttr({role:"grid",components:t.$node[0].id,readonly:!0}))+a.node("div",a.node("button",n.today,n.klass.buttonToday,"type=button data-pick="+r.pick+(e&&!t.disabled(r)?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",n.clear,n.klass.buttonClear,"type=button data-clear=1"+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",n.close,n.klass.buttonClose,"type=button data-close=true "+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id})),n.klass.footer)},n.defaults=function(e){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:e+"table",header:e+"header",navPrev:e+"nav--prev",navNext:e+"nav--next",navDisabled:e+"nav--disabled",month:e+"month",year:e+"year",selectMonth:e+"select--month",selectYear:e+"select--year",weekdays:e+"weekday",day:e+"day",disabled:e+"day--disabled",selected:e+"day--selected",highlighted:e+"day--highlighted",now:e+"day--today",infocus:e+"day--infocus",outfocus:e+"day--outfocus",footer:e+"footer",buttonClear:e+"button--clear",buttonToday:e+"button--today",buttonClose:e+"button--close"}}}(e.klasses().picker+"__"),e.extend("pickadate",n)}),function(e){e.fn.Dropdown=function(){return this.each(function(){function t(t){if(!n.hasClass("is-disabled")){n.find(".is-open").removeClass("is-open"),t.stopPropagation();var i=e(this).parents(".ms-Dropdown").width();e(this).next(".ms-Dropdown-items").css("width",i+"px"),n.toggleClass("is-open"),e(document).bind("click.dropdown",function(t){n.removeClass("is-open"),e(document).unbind("click.dropdown")})}}var n=e(this),i=n.children(".ms-Dropdown-select"),s=i.children("option"),a=(this.id,""),o="",r="";s.each(function(e,t){t.selected&&(a=t.text),o+='<li class="ms-Dropdown-item'+(t.disabled?' is-disabled"':'"')+">"+t.text+"</li>"}),r='<span class="ms-Dropdown-title">'+a+'</span><ul class="ms-Dropdown-items">'+o+"</ul>",n.append(r),n.on("click",".ms-Dropdown-title",function(e){t(e)}),n.on("keyup",function(s){var a=s.keyCode||s.which;if(e(this).hasClass("is-open")){if(e(this).hasClass("is-open")&&(38===a&&e(this).find(".ms-Dropdown-item.is-selected").prev().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").prev().addClass("is-selected"),40===a&&e(this).find(".ms-Dropdown-item.is-selected").next().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").next().addClass("is-selected"),13===a&&!n.hasClass("is-disabled"))){var o=e(this).find(".ms-Dropdown-item.is-selected").text();e(this).find(".ms-Dropdown-title").html(o),i.find("option").each(function(t,n){n.text===o?e(this).prop("selected",!0):e(this).prop("selected",!1)}),i.change(),e(this).removeClass("is-open")}}else(13===a||38===a||40===a)&&(t(s),e(this).find(".ms-Dropdown-item").hasClass("is-selected")||e(this).find(".ms-Dropdown-item:first").addClass("is-selected"));27===a&&e(this).removeClass("is-open")}),n.on("click",".ms-Dropdown-item",function(){if(!n.hasClass("is-disabled")){e(this).siblings(".ms-Dropdown-item").removeClass("is-selected"),e(this).addClass("is-selected"),e(this).parents().siblings(".ms-Dropdown-title").html(e(this).text());var t=e(this).text();i.find("option").each(function(n,i){i.text===t?e(this).prop("selected",!0):e(this).prop("selected",!1)}),i.change()}})})}}(jQuery),function(e){e.fn.ListItem=function(){return this.each(function(){var t=e(this);t.on("click",".js-toggleSelection",function(t){e(this).parents(".ms-ListItem").toggleClass("is-selected")})})}}(jQuery),function(e){e.fn.NavBar=function(){return this.each(function(){var t=e(this);t.on("click",".js-openMenu",function(e){e.stopPropagation(),t.toggleClass("is-open")}),t.click(function(){t.hasClass("is-open")&&t.removeClass("is-open")}),t.on("click",".ms-NavBar-item:not(.is-disabled)",function(n){n.stopPropagation(),0===e(this).children(".ms-NavBar-link").length&&n.preventDefault(),e(this).siblings(".ms-NavBar-item").removeClass("is-selected"),0===t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field").val().length&&e(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur(),e(this).hasClass("ms-NavBar-item--hasMenu")?(e(this).children(".ms-ContextualMenu:first").toggleClass("is-open"),
-e(this).toggleClass("is-selected")):(e(this).addClass("is-selected"),t.removeClass("is-open").find(".ms-ContextualMenu").removeClass("is-open")),e(this).hasClass("ms-NavBar-item--search")&&(e(this).addClass("is-open"),e(this).find(".ms-TextField-field").focus(),t.find(".ms-ContextualMenu:first").removeClass("is-open"))}),t.on("click",".ms-NavBar-item .ms-ContextualMenu",function(n){n.stopPropagation(),e(this).removeClass("is-open"),t.removeClass("is-open").find(".ms-NavBar-item--hasMenu").removeClass("is-selected")}),e(document).on("click","html",function(e){t.find(".ms-NavBar-item").removeClass("is-selected").find(".ms-ContextualMenu").removeClass("is-open"),0===t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field").val().length&&t.find(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur()})})}}(jQuery),function(e){e.fn.Panel=function(){return this.each(function(){var t=e(this),n=t.find(".ms-Panel-main");e(".js-togglePanel").on("click",function(){n.css({display:"block"}),t.toggleClass("is-open")}),n.on("animationend webkitAnimationEnd MSAnimationEnd",function(t){"fadeOut"===t.originalEvent.animationName&&e(this).css({display:"none"})})})}}(jQuery),function(e){function t(e){var t=e.find(".ms-PeoplePicker-searchBox"),n=t.position().left,i=t.outerWidth(),s=n+i,a=t.find(".ms-PeoplePicker-persona:last"),o=a.offset().left,r=a.outerWidth(),c=o+r,l=s-c-7;100>l&&(l="100%"),e.find(".ms-PeoplePicker-searchField").outerWidth(l)}e.fn.PeoplePicker=function(){return this.each(function(){function n(t){e("html, body").animate({scrollTop:s.offset().top},367),e(".ms-PeoplePicker").hasClass("is-active")&&e(".ms-PeoplePicker").removeClass("is-active"),d=!0,t.stopPropagation(),o.width(s.width()-2),s.addClass("is-active"),e(document).bind("click.peoplepicker",function(t){s.removeClass("is-active"),e(document).unbind("click.peoplepicker"),d=!1})}var i,s=e(this),a=s.find(".ms-PeoplePicker-searchField"),o=s.find(".ms-PeoplePicker-results"),r=(s.find(".ms-PeoplePicker-searchMore"),s.find(".ms-PeoplePicker-selected")),c=s.find(".ms-PeoplePicker-selectedPeople"),l=s.find(".ms-PeoplePicker-selectedCount"),d=!1;s.on("focus",".ms-PeoplePicker-searchField",function(e){n(e)}),s.on("click",".ms-PeoplePicker-searchField",function(e){n(e)}),e(this).click(function(e){e.stopPropagation()}),o.on("click",".ms-PeoplePicker-result",function(n){var i=e(this).find(".ms-Persona-primaryText").html(),o=e(this).find(".ms-Persona-secondaryText").html(),d='<div class="ms-PeoplePicker-persona"><div class="ms-Persona ms-Persona--xs ms-Persona--square"><div class="ms-Persona-imageArea"><i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i><img class="ms-Persona-image" src="../persona/Persona.Person2.png"></div><div class="ms-Persona-presence"></div><div class="ms-Persona-details"><div class="ms-Persona-primaryText">'+i+'</div> </div></div><button class="ms-PeoplePicker-personaRemove"><i class="ms-Icon ms-Icon--x"></i> </button></div>',u='<li class="ms-PeoplePicker-selectedPerson"><div class="ms-Persona ms-Persona--square"><div class="ms-Persona-imageArea"><i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i><img class="ms-Persona-image" src="../persona/Persona.Person2.png"><div class="ms-Persona-presence"></div></div><div class="ms-Persona-details"><div class="ms-Persona-primaryText">'+i+'</div><div class="ms-Persona-secondaryText">'+o+'</div></div></div><button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button></li>';if(s.hasClass("ms-PeoplePicker--facePile")){r.hasClass("is-active")||r.addClass("is-active"),c.prepend(u),s.removeClass("is-active");var m=s.find(".ms-PeoplePicker-selectedPerson").length;l.html(m)}else a.before(d),s.removeClass("is-active"),t(s)}),s.on("click",".ms-PeoplePicker-personaRemove",function(n){e(this).parents(".ms-PeoplePicker-persona").remove(),0==e(".ms-PeoplePicker-persona").length?s.find(".ms-PeoplePicker-searchField").outerWidth("100%"):t(s)}),o.on("click",".js-searchMore",function(t){var n=e(this),s=n.find(".ms-PeoplePicker-searchMorePrimary"),a=s.html();n.addClass("is-searching"),s.html("Searching for &ldquo;Sen&rdquo;"),i?i.start():i=new fabric.Spinner(n.get(0)),setTimeout(function(){n.removeClass("is-searching"),s.html(a),i.stop()},3e3)}),o.on("click",".js-resultRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").remove()}),o.on("click",".js-resultExpand",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded")}),c.on("click",".js-selectedRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-selectedPerson").remove();var n=s.find(".ms-PeoplePicker-selectedPerson").length;l.html(n),0===s.find(".ms-PeoplePicker-selectedPerson").length&&r.removeClass("is-active")})})}}(jQuery),function(e){e.fn.PersonaCard=function(){return this.each(function(){var t=e(this);t.on("click",".ms-PersonaCard-action",function(){t.find(".ms-PersonaCard-action").removeClass("is-active"),e(this).addClass("is-active");var n=function(e){var t=document.getElementById("detailList"),n=t.className+"",i=e.charAt(0).toUpperCase()+e.slice(1),s="ms-PersonaCard-detail"+i;n!=s&&(t.classList.remove(n),t.classList.add(s))},i=e(this).attr("id");n(i);var s=e(this).attr("id");t.find(".ms-PersonaCard-actionDetails").removeClass("is-active"),t.find("#"+s+".ms-PersonaCard-actionDetails").addClass("is-active")}),t.on("click",".ms-PersonaCard-detailExpander",function(){e(this).parent(".ms-PersonaCard-actionDetails").toggleClass("is-collapsed")})})}}(jQuery),function(e){e.fn.Pivot=function(){return this.each(function(){var t=e(this);t.on("click",".ms-Pivot-link",function(t){t.preventDefault(),e(this).siblings(".ms-Pivot-link").removeClass("is-selected"),e(this).addClass("is-selected")})})}}(jQuery);var fabric=fabric||{};fabric.ProgressIndicator=function(e){this.container=e,this.cacheDOM()},fabric.ProgressIndicator.prototype=function(){var e,t,n,i,s,a,o=function(e){a.style.width=Math.round(t*e)+"px"},r=function(t){e=t;var n=e/i;this.setProgressPercent(n)},c=function(e){i=e},l=function(e){n.innerHTML=e},d=function(e){s.innerHTML=e},u=function(){n=this.container.querySelector(".ms-ProgressIndicator-itemName")||null,s=this.container.querySelector(".ms-ProgressIndicator-itemDescription")||null,a=this.container.querySelector(".ms-ProgressIndicator-progressBar"),t=this.container.querySelector(".ms-ProgressIndicator-itemProgress").offsetWidth};return{setProgressPercent:o,setName:l,setDescription:d,setProgress:r,setTotal:c,cacheDOM:u}}(),function(e){e.fn.SearchBox=function(){return this.each(function(){var t=!1;e(this).find(".ms-SearchBox-field").on("focus",function(){e(this).siblings(".ms-SearchBox-label").hide(),e(this).parent(".ms-SearchBox").addClass("is-active")}),e(this).find(".ms-SearchBox-closeButton").on("mousedown",function(){t=!0}),e(this).find(".ms-SearchBox-field").on("blur",function(){1==t&&(e(this).val(""),e(this).siblings(".ms-SearchBox-label").show()),e(this).parent(".ms-SearchBox").removeClass("is-active"),0===e(this).val().length&&e(this).siblings(".ms-SearchBox-label").show(),t=!1})})}}(jQuery);var fabric=fabric||{};fabric.Spinner=function(e,t){function n(){u=setInterval(function(){for(var e=y.length;e--;)o(y[e])},P)}function i(){clearInterval(u)}function s(){"sixteen"===v?(f=k,h=16):(f=g,h=8),d(),a(),n()}function a(){for(var e,t=h;t--;)for(e=y.length;e--;)o(y[e])}function o(e){var t;e.j<h?t=Math.floor(e.j/(h/2))?r(e.element)-2/h:r(e.element)+2/h:(e.j=0,t=2/h),c(e.element,t),e.j++}function r(e){return parseFloat(window.getComputedStyle(e).getPropertyValue("opacity"))}function c(e,t){e.style.opacity=t}function l(){var e=document.createElement("div"),t=parseInt(window.getComputedStyle(m).getPropertyValue("width"),10);return e.className="ms-Spinner-circle",e.style.width=e.style.height=t*f+"px",e}function d(){"ms-Spinner"!==p.className?(m=document.createElement("div"),m.className="ms-Spinner",p.appendChild(m)):m=p;for(var e,t=m.clientWidth,n=m.clientHeight,i=0,s=t*f,a=2*Math.PI/h,o=h,r=.5*(t-s);o--;){var c=l(),d=Math.round(.5*t+r*Math.cos(i)-.5*c.clientWidth)-.5*s,u=Math.round(.5*n+r*Math.sin(i)-.5*c.clientHeight)-.5*s;m.appendChild(c),c.style.left=d+"px",c.style.top=u+"px",i+=a,e={element:c,j:o},y.push(e)}}var u,m,h,f,p=e,v=t||"eight",g=.18,k=.1,y=[],P=100;return s(),{start:n,stop:i}},function(e){e.fn.TextField=function(){return this.each(function(){e(this).hasClass("ms-TextField--placeholder")&&(e(this).on("click",function(){e(this).find(".ms-Label").hide()}),e(this).find(".ms-TextField-field").on("blur",function(){0===e(this).val().length&&e(this).siblings(".ms-Label").show()})),e(this).hasClass("ms-TextField--underlined")&&(e(this).find(".ms-TextField-field").on("focus",function(){e(this).parent(".ms-TextField--underlined").addClass("is-active")}),e(this).find(".ms-TextField-field").on("blur",function(){e(this).parent(".ms-TextField--underlined").removeClass("is-active")}))})}}(jQuery);
+var fabric=fabric||{};fabric.Breadcrumb=function(e){this.container=e,this.init()},fabric.Breadcrumb.prototype=function(){var e,t,n,i,s,a,o=639,r=0,c=[],l=function(){var e,n,i,s,a=t.length,o=0;for(o;a>o;o++)e=t[o].querySelector(".ms-Breadcrumb-itemLink"),n=e.textContent,i=e.getAttribute("href"),s=parseInt(e.getAttribute("tabindex"),10),c.push({text:n,link:i,tabIndex:s})},d=function(e){g(null),u()},u=function(){var t=window.innerWidth>o?4:2;t!==r&&(c.length>t?e.className+=" is-overflow":y(e," is-overflow"),h(t),m(t)),r=t},m=function(e){f(n);var t=c.length-e,i=c.slice(0,t);i.forEach(function(e){var t=document.createElement("li");t.className="ms-ContextualMenu-item",isNaN(e.tabIndex)||t.setAttribute("tabindex",e.tabIndex);var i=document.createElement("a");i.className="ms-ContextualMenu-link",i.setAttribute("href",e.link),i.textContent=e.text,t.appendChild(i),n.appendChild(t)})},h=function(e){f(a);var t=c.length-e;if(t>=0)for(t;t<c.length;t++){var n=document.createElement("li"),i=c[t],s=document.createElement("a"),o=document.createElement("i");n.className="ms-Breadcrumb-listItem",s.className="ms-Breadcrumb-itemLink",s.setAttribute("href",i.link),isNaN(i.tabIndex)||s.setAttribute("tabindex",i.tabIndex),s.textContent=i.text,o.className="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight",n.appendChild(s),n.appendChild(o),a.appendChild(n)}},f=function(e){for(;e.firstChild;)e.removeChild(e.firstChild)},p=function(e){-1===s.className.indexOf(" is-open")&&(s.className+=" is-open",C(e),i.focus())},v=function(e){13===e.keyCode&&p(e)},g=function(e){e&&e.target===i||y(s," is-open")},y=function(e,t){var n=e.className.indexOf(t);n>-1&&(e.className=e.className.substring(0,n))},k=function(o){e=o.container,a=e.querySelector(".ms-Breadcrumb-list"),t=e.querySelectorAll(".ms-Breadcrumb-listItem"),n=e.querySelector(".ms-ContextualMenu"),i=e.querySelector(".ms-Breadcrumb-overflowButton"),s=e.querySelector(".ms-Breadcrumb-overflowMenu")},b=function(){window.addEventListener("resize",d),i.addEventListener("click",p,!1),i.addEventListener("keypress",v,!1),document.addEventListener("click",g,!1),a.addEventListener("click",C,!1)},C=function(e){e.target.blur()},P=function(){k(this),b(),l(),d(null)};return{init:P}}(),function(e){e.fn.ContextualMenu=function(){return this.each(function(){var t=e(this);t.on("click",".ms-ContextualMenu-link:not(.is-disabled)",function(n){n.preventDefault(),t.hasClass("ms-ContextualMenu--multiselect")?e(this).hasClass("is-selected")?e(this).removeClass("is-selected"):e(this).addClass("is-selected"):(e(".ms-ContextualMenu-link").removeClass("is-selected").siblings(".ms-ContextualMenu").removeClass("is-open"),e(this).addClass("is-selected"),e(this).hasClass("ms-ContextualMenu-link--hasMenu")&&(e(this).siblings(".ms-ContextualMenu:first").addClass("is-open"),n.stopPropagation()))})})}}(jQuery),function(e){e.fn.CommandBar=function(){var t=function(e,t,n){var i='<li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link"" href="#">';return i+=e,i+="</a></li>"},n=function(t,n,i){var s=[];return t.each(function(t){var a=e(this),o=a.position().left+a.outerWidth()+n+10-i.position().left;s.push({jquery:a,rightOffset:o}),console.log(a.outerWidth(),t,i.position().left,a.position().left)}),s},s=function(e,t,n){for(var i=[],s=0;s<e.length;s++){var a=e[s].jquery,o=e[s].rightOffset;a.hasClass("ms-CommandBarItem-overflow")||(o+n>t?i.push(a):a.removeClass("is-hidden"))}return i},a=function(n,s,a){var o="";if(n.length>0){for(s.addClass("is-visible"),a.html(""),i=0;i<n.length;i++){var r=e(n[i]);r.addClass("is-hidden");var c=r.find(".ms-CommandBarItem-commandText").text();o+=t(c)}a.html(o)}else s.removeClass("is-visible")};return this.each(function(){var t,i,o=e(this),r=o.find(".ms-CommandBar-mainArea"),c=r.find(".ms-CommandBarItem").not(".ms-CommandBarItem-overflow"),l=o.find(".ms-CommandBarItem-overflow"),d=o.find(".ms-CommandBarItem-overflow").outerWidth(),u=o.find(".ms-CommandBar-overflowMenu"),m=o.find(".ms-CommandBarSearch"),h=!1;i=n(c,d,r),t=s(i,r.innerWidth(),d),a(t,l,u),e(window).width()<640&&e(".ms-CommandBarSearch-iconSearchWrapper").click(function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")}),e(window).resize(function(){var t;e(window).width()<640&&0==h?(console.log("Switching to mobile"),i=n(c,d,r),h=!0,e(".ms-CommandBarSearch-iconSearchWrapper").unbind(),e(".ms-CommandBarSearch-iconSearchWrapper").click(function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")})):e(window).width()>639&&1==h&&(console.log("Switching to Desktop"),i=n(c,d,r),h=!1,e(".ms-CommandBarSearch").unbind()),console.log(i,r.innerWidth()),t=s(i,r.innerWidth(),d),a(t,l,u)}),l.click(function(){u.toggleClass("is-open")}),l.focusout(function(){u.removeClass("is-open")}),m.find(".ms-CommandBarSearch-input").click(function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")}),m.find(".ms-CommandBarSearch-input").on("focus",function(){e(this).closest(".ms-CommandBarSearch").addClass("is-active")}),m.find(".ms-CommandBarSearch-iconClearWrapper").click(function(){var t=e(this).parent().find(".ms-CommandBarSearch-input");t.val(""),t.parent().removeClass("is-active")}),m.parent().find(".ms-CommandBarSearch-input").blur(function(){var t=e(this);t.val(""),t.parent().removeClass("is-active")})})}}(jQuery),function(e){function t(t){var s=t.find(".ms-DatePicker-monthComponents"),a=t.find(".ms-DatePicker-goToday"),o=(t.find(".ms-DatePicker-dayPicker"),t.find(".ms-DatePicker-monthPicker")),r=t.find(".ms-DatePicker-yearPicker"),c=t.find(".ms-DatePicker-wrap"),l=t.find(".ms-TextField-field").pickadate("picker");s.appendTo(c),a.appendTo(c),o.appendTo(c),r.appendTo(c),i(t),s.on("click",".js-prevMonth",function(e){e.preventDefault();var t=l.get("highlight").month-1;n(l,null,t,null)}),s.on("click",".js-nextMonth",function(e){e.preventDefault();var t=l.get("highlight").month+1;n(l,null,t,null)}),o.on("click",".js-prevYear",function(e){e.preventDefault();var t=l.get("highlight").year-1;n(l,t,null,null)}),o.on("click",".js-nextYear",function(e){e.preventDefault();var t=l.get("highlight").year+1;n(l,t,null,null)}),r.on("click",".js-prevDecade",function(e){e.preventDefault();var t=l.get("highlight").year-10;n(l,t,null,null)}),r.on("click",".js-nextDecade",function(e){e.preventDefault();var t=l.get("highlight").year+10;n(l,t,null,null)}),a.click(function(e){e.preventDefault();var n=new Date;l.set("select",[n.getFullYear(),n.getMonth(),n.getDate()]),t.removeClass("is-pickingMonths").removeClass("is-pickingYears")}),o.on("click",".js-changeDate",function(i){i.preventDefault();var s=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");n(l,s,a,o),t.hasClass("is-pickingMonths")&&t.removeClass("is-pickingMonths")}),r.on("click",".js-changeDate",function(i){i.preventDefault();var s=e(this).attr("data-year"),a=e(this).attr("data-month"),o=e(this).attr("data-day");n(l,s,a,o),t.hasClass("is-pickingYears")&&t.removeClass("is-pickingYears")}),o.on("click",".js-showDayPicker",function(e){t.removeClass("is-pickingMonths"),t.removeClass("is-pickingYears")}),s.on("click",".js-showMonthPicker",function(e){t.toggleClass("is-pickingMonths")}),o.on("click",".js-showYearPicker",function(e){t.toggleClass("is-pickingYears")})}function n(e,t,n,i){null==t&&(t=e.get("highlight").year),null==n&&(n=e.get("highlight").month),null==i&&(i=e.get("highlight").date),e.set("highlight",[t,n,i])}function i(e){var t=e.find(".ms-DatePicker-monthPicker"),n=e.find(".ms-DatePicker-yearPicker"),i=(e.find(".ms-DatePicker-wrap"),e.find(".ms-TextField-field").pickadate("picker"));t.find(".ms-DatePicker-currentYear").text(i.get("view").year),t.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"),t.find('.ms-DatePicker-monthOption[data-month="'+i.get("highlight").month+'"]').addClass("is-highlighted"),n.find(".ms-DatePicker-currentDecade").remove(),n.find(".ms-DatePicker-optionGrid").remove();var s=i.get("highlight").year-11,a=s+" - "+(s+11),o='<div class="ms-DatePicker-currentDecade">'+a+"</div>";o+='<div class="ms-DatePicker-optionGrid">';for(var r=s;s+12>r;r++)o+='<span class="ms-DatePicker-yearOption js-changeDate" data-year="'+r+'">'+r+"</span>";o+="</div>",n.append(o),n.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),n.find('.ms-DatePicker-yearOption[data-year="'+i.get("highlight").year+'"]').addClass("is-highlighted")}function s(t){e("html, body").animate({scrollTop:t.offset().top},367)}e.fn.DatePicker=function(n){return this.each(function(){var a=e(this),o=a.find(".ms-TextField-field").pickadate(e.extend({weekdaysShort:["S","M","T","W","T","F","S"],today:"",clear:"",close:"",onStart:function(){t(a)},klass:{input:"ms-DatePicker-input",active:"ms-DatePicker-input--active",picker:"ms-DatePicker-picker",opened:"ms-DatePicker-picker--opened",focused:"ms-DatePicker-picker--focused",holder:"ms-DatePicker-holder",frame:"ms-DatePicker-frame",wrap:"ms-DatePicker-wrap",box:"ms-DatePicker-dayPicker",header:"ms-DatePicker-header",month:"ms-DatePicker-month",year:"ms-DatePicker-year",table:"ms-DatePicker-table",weekdays:"ms-DatePicker-weekday",day:"ms-DatePicker-day",disabled:"ms-DatePicker-day--disabled",selected:"ms-DatePicker-day--selected",highlighted:"ms-DatePicker-day--highlighted",now:"ms-DatePicker-day--today",infocus:"ms-DatePicker-day--infocus",outfocus:"ms-DatePicker-day--outfocus"}},n||{})),r=o.pickadate("picker");r.on({render:function(){i(a)},open:function(){s(a)}})})}}(jQuery),!function(e){"function"==typeof define&&define.amd?define("picker",["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):this.Picker=e(jQuery)}(function(e){function t(a,o,r,d){function u(){return t._.node("div",t._.node("div",t._.node("div",t._.node("div",P.component.nodes(g.open),k.box),k.wrap),k.frame),k.holder)}function m(){b.data(o,P).addClass(k.input).val(b.data("value")?P.get("select",y.format):a.value).on("focus."+g.id+" click."+g.id,p),y.editable||b.on("keydown."+g.id,function(e){var t=e.keyCode,n=/^(8|46)$/.test(t);return 27==t?(P.close(),!1):void((32==t||n||!g.open&&P.component.key[t])&&(e.preventDefault(),e.stopPropagation(),n?P.clear().close():P.open()))}),s(a,{haspopup:!0,expanded:!1,readonly:!1,owns:a.id+"_root"+(P._hidden?" "+P._hidden.id:"")})}function h(){P.$root.on({focusin:function(e){P.$root.removeClass(k.focused),e.stopPropagation()},"mousedown click":function(t){var n=t.target;n!=P.$root.children()[0]&&(t.stopPropagation(),"mousedown"!=t.type||e(n).is(":input")||"OPTION"==n.nodeName||(t.preventDefault(),a.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var t=e(this),n=t.data(),i=t.hasClass(k.navDisabled)||t.hasClass(k.disabled),s=document.activeElement;s=s&&(s.type||s.href)&&s,(i||s&&!e.contains(P.$root[0],s))&&a.focus(),!i&&n.nav?P.set("highlight",P.component.item.highlight,{nav:n.nav}):!i&&"pick"in n?P.set("select",n.pick).close(!0):n.clear?P.clear().close(!0):n.close&&P.close(!0)}),s(P.$root[0],"hidden",!0)}function f(){var t;y.hiddenName===!0?(t=a.name,a.name=""):(t=["string"==typeof y.hiddenPrefix?y.hiddenPrefix:"","string"==typeof y.hiddenSuffix?y.hiddenSuffix:"_submit"],t=t[0]+a.name+t[1]),P._hidden=e('<input type=hidden name="'+t+'"'+(b.data("value")||a.value?' value="'+P.get("select",y.formatSubmit)+'"':"")+">")[0],b.on("change."+g.id,function(){P._hidden.value=a.value?P.get("select",y.formatSubmit):""}).after(P._hidden)}function p(e){e.stopPropagation(),"focus"==e.type&&P.$root.addClass(k.focused),P.open()}if(!a)return t;var v=!1,g={id:a.id||"P"+Math.abs(~~(Math.random()*new Date))},y=r?e.extend(!0,{},r.defaults,d):d||{},k=e.extend({},t.klasses(),y.klass),b=e(a),C=function(){return this.start()},P=C.prototype={constructor:C,$node:b,start:function(){return g&&g.start?P:(g.methods={},g.start=!0,g.open=!1,g.type=a.type,a.autofocus=a==document.activeElement,a.readOnly=!y.editable,a.id=a.id||g.id,"text"!=a.type&&(a.type="text"),P.component=new r(P,y),P.$root=e(t._.node("div",u(),k.picker,'id="'+a.id+'_root"')),h(),y.formatSubmit&&f(),m(),y.container?e(y.container).append(P.$root):b.after(P.$root),P.on({start:P.component.onStart,render:P.component.onRender,stop:P.component.onStop,open:P.component.onOpen,close:P.component.onClose,set:P.component.onSet}).on({start:y.onStart,render:y.onRender,stop:y.onStop,open:y.onOpen,close:y.onClose,set:y.onSet}),v=n(P.$root.children()[0]),a.autofocus&&P.open(),P.trigger("start").trigger("render"))},render:function(e){return e?P.$root.html(u()):P.$root.find("."+k.box).html(P.component.nodes(g.open)),P.trigger("render")},stop:function(){return g.start?(P.close(),P._hidden&&P._hidden.parentNode.removeChild(P._hidden),P.$root.remove(),b.removeClass(k.input).removeData(o),setTimeout(function(){b.off("."+g.id)},0),a.type=g.type,a.readOnly=!1,P.trigger("stop"),g.methods={},g.start=!1,P):P},open:function(n){return g.open?P:(b.addClass(k.active),s(a,"expanded",!0),setTimeout(function(){P.$root.addClass(k.opened),s(P.$root[0],"hidden",!1)},0),n!==!1&&(g.open=!0,v&&l.css("overflow","hidden").css("padding-right","+="+i()),b.trigger("focus"),c.on("click."+g.id+" focusin."+g.id,function(e){var t=e.target;t!=a&&t!=document&&3!=e.which&&P.close(t===P.$root.children()[0])}).on("keydown."+g.id,function(n){var i=n.keyCode,s=P.component.key[i],o=n.target;27==i?P.close(!0):o!=a||!s&&13!=i?e.contains(P.$root[0],o)&&13==i&&(n.preventDefault(),o.click()):(n.preventDefault(),s?t._.trigger(P.component.key.go,P,[t._.trigger(s)]):P.$root.find("."+k.highlighted).hasClass(k.disabled)||P.set("select",P.component.item.highlight).close())})),P.trigger("open"))},close:function(e){return e&&(b.off("focus."+g.id).trigger("focus"),setTimeout(function(){b.on("focus."+g.id,p)},0)),b.removeClass(k.active),s(a,"expanded",!1),setTimeout(function(){P.$root.removeClass(k.opened+" "+k.focused),s(P.$root[0],"hidden",!0)},0),g.open?(g.open=!1,v&&l.css("overflow","").css("padding-right","-="+i()),c.off("."+g.id),P.trigger("close")):P},clear:function(e){return P.set("clear",null,e)},set:function(t,n,i){var s,a,o=e.isPlainObject(t),r=o?t:{};if(i=o&&e.isPlainObject(n)?n:i||{},t){o||(r[t]=n);for(s in r)a=r[s],s in P.component.item&&(void 0===a&&(a=null),P.component.set(s,a,i)),("select"==s||"clear"==s)&&b.val("clear"==s?"":P.get(s,y.format)).trigger("change");P.render()}return i.muted?P:P.trigger("set",r)},get:function(e,n){if(e=e||"value",null!=g[e])return g[e];if("value"==e)return a.value;if(e in P.component.item){if("string"==typeof n){var i=P.component.get(e);return i?t._.trigger(P.component.formats.toString,P.component,[n,i]):""}return P.component.get(e)}},on:function(t,n,i){var s,a,o=e.isPlainObject(t),r=o?t:{};if(t){o||(r[t]=n);for(s in r)a=r[s],i&&(s="_"+s),g.methods[s]=g.methods[s]||[],g.methods[s].push(a)}return P},off:function(){var e,t,n=arguments;for(e=0,namesCount=n.length;namesCount>e;e+=1)t=n[e],t in g.methods&&delete g.methods[t];return P},trigger:function(e,n){var i=function(e){var i=g.methods[e];i&&i.map(function(e){t._.trigger(e,P,[n])})};return i("_"+e),i(e),P}};return new C}function n(e){var t,n="position";return e.currentStyle?t=e.currentStyle[n]:window.getComputedStyle&&(t=getComputedStyle(e)[n]),"fixed"==t}function i(){if(l.height()<=r.height())return 0;var t=e('<div style="visibility:hidden;width:100px" />').appendTo("body"),n=t[0].offsetWidth;t.css("overflow","scroll");var i=e('<div style="width:100%" />').appendTo(t),s=i[0].offsetWidth;return t.remove(),n-s}function s(t,n,i){if(e.isPlainObject(n))for(var s in n)a(t,s,n[s]);else a(t,n,i)}function a(e,t,n){e.setAttribute(("role"==t?"":"aria-")+t,n)}function o(t,n){e.isPlainObject(t)||(t={attribute:n}),n="";for(var i in t){var s=("role"==i?"":"aria-")+i,a=t[i];n+=null==a?"":s+'="'+t[i]+'"'}return n}var r=e(window),c=e(document),l=e(document.documentElement);return t.klasses=function(e){return e=e||"picker",{picker:e,opened:e+"--opened",focused:e+"--focused",input:e+"__input",active:e+"__input--active",holder:e+"__holder",frame:e+"__frame",wrap:e+"__wrap",box:e+"__box"}},t._={group:function(e){for(var n,i="",s=t._.trigger(e.min,e);s<=t._.trigger(e.max,e,[s]);s+=e.i)n=t._.trigger(e.item,e,[s]),i+=t._.node(e.node,n[0],n[1],n[2]);return i},node:function(t,n,i,s){return n?(n=e.isArray(n)?n.join(""):n,i=i?' class="'+i+'"':"",s=s?" "+s:"","<"+t+i+s+">"+n+"</"+t+">"):""},lead:function(e){return(10>e?"0":"")+e},trigger:function(e,t,n){return"function"==typeof e?e.apply(t,n||[]):e},digits:function(e){return/\d/.test(e[1])?2:1},isDate:function(e){return{}.toString.call(e).indexOf("Date")>-1&&this.isInteger(e.getUTCDate())},isInteger:function(e){return{}.toString.call(e).indexOf("Number")>-1&&e%1===0},ariaAttr:o},t.extend=function(n,i){e.fn[n]=function(s,a){var o=this.data(n);return"picker"==s?o:o&&"string"==typeof s?t._.trigger(o[s],o,[a]):this.each(function(){var a=e(this);a.data(n)||new t(this,n,i,s)})},e.fn[n].defaults=i.defaults},t}),function(e){"function"==typeof define&&define.amd?define(["picker","jquery"],e):"object"==typeof exports?module.exports=e(require("./picker.js"),require("jquery")):e(Picker,jQuery)}(function(e,t){function n(e,t){var n=this,i=e.$node[0],s=i.value,a=e.$node.data("value"),o=a||s,r=a?t.formatSubmit:t.format,c=function(){return i.currentStyle?"rtl"==i.currentStyle.direction:"rtl"==getComputedStyle(e.$root[0]).direction};n.settings=t,n.$node=e.$node,n.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},n.item={},n.item.clear=null,n.item.disable=(t.disable||[]).slice(0),n.item.enable=-function(e){return e[0]===!0?e.shift():-1}(n.item.disable),n.set("min",t.min).set("max",t.max).set("now"),o?n.set("select",o,{format:r}):n.set("select",null).set("highlight",n.item.now),n.key={40:7,38:-7,39:function(){return c()?-1:1},37:function(){return c()?1:-1},go:function(e){var t=n.item.highlight,i=new Date(Date.UTC(t.year,t.month,t.date+e));n.set("highlight",i,{interval:e}),this.render()}},e.on("render",function(){e.$root.find("."+t.klass.selectMonth).on("change",function(){var n=this.value;n&&(e.set("highlight",[e.get("view").year,n,e.get("highlight").date]),e.$root.find("."+t.klass.selectMonth).trigger("focus"))}),e.$root.find("."+t.klass.selectYear).on("change",function(){var n=this.value;n&&(e.set("highlight",[n,e.get("view").month,e.get("highlight").date]),e.$root.find("."+t.klass.selectYear).trigger("focus"))})},1).on("open",function(){var i="";n.disabled(n.get("now"))&&(i=":not(."+t.klass.buttonToday+")"),e.$root.find("button"+i+", select").attr("disabled",!1)},1).on("close",function(){e.$root.find("button, select").attr("disabled",!0)},1)}var i=7,s=6,a=e._;n.prototype.set=function(e,t,n){var i=this,s=i.item;return null===t?("clear"==e&&(e="select"),s[e]=t,i):(s["enable"==e?"disable":"flip"==e?"enable":e]=i.queue[e].split(" ").map(function(s){return t=i[s](e,t,n)}).pop(),"select"==e?i.set("highlight",s.select,n):"highlight"==e?i.set("view",s.highlight,n):e.match(/^(flip|min|max|disable|enable)$/)&&(s.select&&i.disabled(s.select)&&i.set("select",s.select,n),s.highlight&&i.disabled(s.highlight)&&i.set("highlight",s.highlight,n)),i)},n.prototype.get=function(e){return this.item[e]},n.prototype.create=function(e,n,i){var s,o=this;return n=void 0===n?e:n,n==-1/0||1/0==n?s=n:t.isPlainObject(n)&&a.isInteger(n.pick)?n=n.obj:t.isArray(n)?(n=new Date(Date.UTC(n[0],n[1],n[2])),n=a.isDate(n)?n:o.create().obj):n=a.isInteger(n)?o.normalize(new Date(n),i):a.isDate(n)?o.normalize(n,i):o.now(e,n,i),{year:s||n.getUTCFullYear(),month:s||n.getUTCMonth(),date:s||n.getUTCDate(),day:s||n.getUTCDay(),obj:s||n,pick:s||n.getTime()}},n.prototype.createRange=function(e,n){var i=this,s=function(e){return e===!0||t.isArray(e)||a.isDate(e)?i.create(e):e};return a.isInteger(e)||(e=s(e)),a.isInteger(n)||(n=s(n)),a.isInteger(e)&&t.isPlainObject(n)?e=[n.year,n.month,n.date+e]:a.isInteger(n)&&t.isPlainObject(e)&&(n=[e.year,e.month,e.date+n]),{from:s(e),to:s(n)}},n.prototype.withinRange=function(e,t){return e=this.createRange(e.from,e.to),t.pick>=e.from.pick&&t.pick<=e.to.pick},n.prototype.overlapRanges=function(e,t){var n=this;return e=n.createRange(e.from,e.to),t=n.createRange(t.from,t.to),n.withinRange(e,t.from)||n.withinRange(e,t.to)||n.withinRange(t,e.from)||n.withinRange(t,e.to)},n.prototype.now=function(e,t,n){return t=new Date,n&&n.rel&&t.setUTCDate(t.getUTCDate()+n.rel),this.normalize(t,n)},n.prototype.navigate=function(e,n,i){var s,a,o,r,c=t.isArray(n),l=t.isPlainObject(n),d=this.item.view;if(c||l){for(l?(a=n.year,o=n.month,r=n.date):(a=+n[0],o=+n[1],r=+n[2]),i&&i.nav&&d&&d.month!==o&&(a=d.year,o=d.month),s=new Date(Date.UTC(a,o+(i&&i.nav?i.nav:0),1)),a=s.getUTCFullYear(),o=s.getUTCMonth();new Date(Date.UTC(a,o,r)).getUTCMonth()!==o;)r-=1;n=[a,o,r]}return n},n.prototype.normalize=function(e){return e.setUTCHours(0,0,0,0),e},n.prototype.measure=function(e,t){var n=this;return t?"string"==typeof t?t=n.parse(e,t):a.isInteger(t)&&(t=n.now(e,t,{rel:t})):t="min"==e?-1/0:1/0,t},n.prototype.viewset=function(e,t){return this.create([t.year,t.month,1])},n.prototype.validate=function(e,n,i){var s,o,r,c,l=this,d=n,u=i&&i.interval?i.interval:1,m=-1===l.item.enable,h=l.item.min,f=l.item.max,p=m&&l.item.disable.filter(function(e){if(t.isArray(e)){var i=l.create(e).pick;i<n.pick?s=!0:i>n.pick&&(o=!0)}return a.isInteger(e)}).length;if((!i||!i.nav)&&(!m&&l.disabled(n)||m&&l.disabled(n)&&(p||s||o)||!m&&(n.pick<=h.pick||n.pick>=f.pick)))for(m&&!p&&(!o&&u>0||!s&&0>u)&&(u*=-1);l.disabled(n)&&(Math.abs(u)>1&&(n.month<d.month||n.month>d.month)&&(n=d,u=u>0?1:-1),n.pick<=h.pick?(r=!0,u=1,n=l.create([h.year,h.month,h.date+(n.pick===h.pick?0:-1)])):n.pick>=f.pick&&(c=!0,u=-1,n=l.create([f.year,f.month,f.date+(n.pick===f.pick?0:1)])),!r||!c);)n=l.create([n.year,n.month,n.date+u]);return n},n.prototype.disabled=function(e){var n=this,i=n.item.disable.filter(function(i){return a.isInteger(i)?e.day===(n.settings.firstDay?i:i-1)%7:t.isArray(i)||a.isDate(i)?e.pick===n.create(i).pick:t.isPlainObject(i)?n.withinRange(i,e):void 0});return i=i.length&&!i.filter(function(e){return t.isArray(e)&&"inverted"==e[3]||t.isPlainObject(e)&&e.inverted}).length,-1===n.item.enable?!i:i||e.pick<n.item.min.pick||e.pick>n.item.max.pick},n.prototype.parse=function(e,t,n){var i=this,s={};return t&&"string"==typeof t?(n&&n.format||(n=n||{},n.format=i.settings.format),i.formats.toArray(n.format).map(function(e){var n=i.formats[e],o=n?a.trigger(n,i,[t,s]):e.replace(/^!/,"").length;n&&(s[e]=t.substr(0,o)),t=t.substr(o)}),[s.yyyy||s.yy,+(s.mm||s.m)-1,s.dd||s.d]):t},n.prototype.formats=function(){function e(e,t,n){var i=e.match(/\w+/)[0];return n.mm||n.m||(n.m=t.indexOf(i)+1),i.length}function t(e){return e.match(/\w+/)[0].length}return{d:function(e,t){return e?a.digits(e):t.date},dd:function(e,t){return e?2:a.lead(t.date)},ddd:function(e,n){return e?t(e):this.settings.weekdaysShort[n.day]},dddd:function(e,n){return e?t(e):this.settings.weekdaysFull[n.day]},m:function(e,t){return e?a.digits(e):t.month+1},mm:function(e,t){return e?2:a.lead(t.month+1)},mmm:function(t,n){var i=this.settings.monthsShort;return t?e(t,i,n):i[n.month]},mmmm:function(t,n){var i=this.settings.monthsFull;return t?e(t,i,n):i[n.month]},yy:function(e,t){return e?2:(""+t.year).slice(2)},yyyy:function(e,t){return e?4:t.year},toArray:function(e){return e.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(e,t){var n=this;return n.formats.toArray(e).map(function(e){return a.trigger(n.formats[e],n,[0,t])||e.replace(/^!/,"")}).join("")}}}(),n.prototype.isDateExact=function(e,n){var i=this;return a.isInteger(e)&&a.isInteger(n)||"boolean"==typeof e&&"boolean"==typeof n?e===n:(a.isDate(e)||t.isArray(e))&&(a.isDate(n)||t.isArray(n))?i.create(e).pick===i.create(n).pick:t.isPlainObject(e)&&t.isPlainObject(n)?i.isDateExact(e.from,n.from)&&i.isDateExact(e.to,n.to):!1},n.prototype.isDateOverlap=function(e,n){var i=this,s=i.settings.firstDay?1:0;return a.isInteger(e)&&(a.isDate(n)||t.isArray(n))?(e=e%7+s,e===i.create(n).day+1):a.isInteger(n)&&(a.isDate(e)||t.isArray(e))?(n=n%7+s,n===i.create(e).day+1):t.isPlainObject(e)&&t.isPlainObject(n)?i.overlapRanges(e,n):!1},n.prototype.flipEnable=function(e){var t=this.item;t.enable=e||(-1==t.enable?1:-1)},n.prototype.deactivate=function(e,n){var i=this,s=i.item.disable.slice(0);return"flip"==n?i.flipEnable():n===!1?(i.flipEnable(1),s=[]):n===!0?(i.flipEnable(-1),s=[]):n.map(function(e){for(var n,o=0;o<s.length;o+=1)if(i.isDateExact(e,s[o])){n=!0;break}n||(a.isInteger(e)||a.isDate(e)||t.isArray(e)||t.isPlainObject(e)&&e.from&&e.to)&&s.push(e)}),s},n.prototype.activate=function(e,n){var i=this,s=i.item.disable,o=s.length;return"flip"==n?i.flipEnable():n===!0?(i.flipEnable(1),s=[]):n===!1?(i.flipEnable(-1),s=[]):n.map(function(e){var n,r,c,l;for(c=0;o>c;c+=1){if(r=s[c],i.isDateExact(r,e)){n=s[c]=null,l=!0;break}if(i.isDateOverlap(r,e)){t.isPlainObject(e)?(e.inverted=!0,n=e):t.isArray(e)?(n=e,n[3]||n.push("inverted")):a.isDate(e)&&(n=[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),"inverted"]);break}}if(n)for(c=0;o>c;c+=1)if(i.isDateExact(s[c],e)){s[c]=null;break}if(l)for(c=0;o>c;c+=1)if(i.isDateOverlap(s[c],e)){s[c]=null;break}n&&s.push(n)}),s.filter(function(e){return null!=e})},n.prototype.nodes=function(e){var t=this,n=t.settings,o=t.item,r=o.now,c=o.select,l=o.highlight,d=o.view,u=o.disable,m=o.min,h=o.max,f=function(e,t){return n.firstDay&&(e.push(e.shift()),t.push(t.shift())),a.node("thead",a.node("tr",a.group({min:0,max:i-1,i:1,node:"th",item:function(i){return[e[i],n.klass.weekdays,'scope=col title="'+t[i]+'"']}})))}((n.showWeekdaysFull?n.weekdaysFull:n.weekdaysShort).slice(0),n.weekdaysFull.slice(0)),p=function(e){return a.node("div"," ",n.klass["nav"+(e?"Next":"Prev")]+(e&&d.year>=h.year&&d.month>=h.month||!e&&d.year<=m.year&&d.month<=m.month?" "+n.klass.navDisabled:""),"data-nav="+(e||-1)+" "+a.ariaAttr({role:"button",components:t.$node[0].id+"_table"})+' title="'+(e?n.labelMonthNext:n.labelMonthPrev)+'"')},v=function(){var i=n.showMonthsShort?n.monthsShort:n.monthsFull;return n.selectMonths?a.node("select",a.group({min:0,max:11,i:1,node:"option",item:function(e){return[i[e],0,"value="+e+(d.month==e?" selected":"")+(d.year==m.year&&e<m.month||d.year==h.year&&e>h.month?" disabled":"")]}}),n.klass.selectMonth,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+n.labelMonthSelect+'"'):a.node("div",i[d.month],n.klass.month)},g=function(){var i=d.year,s=n.selectYears===!0?5:~~(n.selectYears/2);if(s){var o=m.year,r=h.year,c=i-s,l=i+s;if(o>c&&(l+=o-c,c=o),l>r){var u=c-o,f=l-r;c-=u>f?f:u,l=r}return a.node("select",a.group({min:c,max:l,i:1,node:"option",item:function(e){return[e,0,"value="+e+(i==e?" selected":"")]}}),n.klass.selectYear,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+n.labelYearSelect+'"')}return a.node("div",i,n.klass.year)};return a.node("div",(n.selectYears?g()+v():v()+g())+p()+p(1),n.klass.header)+a.node("table",f+a.node("tbody",a.group({min:0,max:s-1,i:1,node:"tr",item:function(e){var s=n.firstDay&&0===t.create([d.year,d.month,1]).day?-7:0;return[a.group({min:i*e-d.day+s+1,max:function(){return this.min+i-1},i:1,node:"td",item:function(e){e=t.create([d.year,d.month,e+(n.firstDay?1:0)]);var i=c&&c.pick==e.pick,s=l&&l.pick==e.pick,o=u&&t.disabled(e)||e.pick<m.pick||e.pick>h.pick;return[a.node("div",e.date,function(t){return t.push(d.month==e.month?n.klass.infocus:n.klass.outfocus),r.pick==e.pick&&t.push(n.klass.now),i&&t.push(n.klass.selected),s&&t.push(n.klass.highlighted),o&&t.push(n.klass.disabled),t.join(" ")}([n.klass.day]),"data-pick="+e.pick+" "+a.ariaAttr({role:"gridcell",selected:i&&t.$node.val()===a.trigger(t.formats.toString,t,[n.format,e])?!0:null,activedescendant:s?!0:null,disabled:o?!0:null})),"",a.ariaAttr({role:"presentation"})]}})]}})),n.klass.table,'id="'+t.$node[0].id+'_table" '+a.ariaAttr({role:"grid",components:t.$node[0].id,readonly:!0}))+a.node("div",a.node("button",n.today,n.klass.buttonToday,"type=button data-pick="+r.pick+(e&&!t.disabled(r)?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",n.clear,n.klass.buttonClear,"type=button data-clear=1"+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",n.close,n.klass.buttonClose,"type=button data-close=true "+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id})),n.klass.footer)},n.defaults=function(e){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:e+"table",header:e+"header",navPrev:e+"nav--prev",navNext:e+"nav--next",navDisabled:e+"nav--disabled",month:e+"month",year:e+"year",selectMonth:e+"select--month",selectYear:e+"select--year",weekdays:e+"weekday",day:e+"day",disabled:e+"day--disabled",selected:e+"day--selected",highlighted:e+"day--highlighted",now:e+"day--today",infocus:e+"day--infocus",outfocus:e+"day--outfocus",footer:e+"footer",buttonClear:e+"button--clear",buttonToday:e+"button--today",buttonClose:e+"button--close"}}}(e.klasses().picker+"__"),e.extend("pickadate",n)}),function(e){e.fn.Dropdown=function(){return this.each(function(){function t(t){if(!n.hasClass("is-disabled")){n.find(".is-open").removeClass("is-open"),t.stopPropagation();var i=e(this).parents(".ms-Dropdown").width();e(this).next(".ms-Dropdown-items").css("width",i+"px"),n.toggleClass("is-open"),e(".ms-Dropdown").each(function(){e(this)[0]!==n[0]&&e(this).removeClass("is-open")}),e(document).bind("click.dropdown",function(t){n.removeClass("is-open"),e(document).unbind("click.dropdown")})}}var n=e(this),i=n.children(".ms-Dropdown-select"),s=i.children("option"),a=(this.id,""),o="",r="";s.each(function(e,t){t.selected&&(a=t.text),o+='<li class="ms-Dropdown-item'+(t.disabled?' is-disabled"':'"')+">"+t.text+"</li>"}),r='<span class="ms-Dropdown-title">'+a+'</span><ul class="ms-Dropdown-items">'+o+"</ul>",n.append(r),n.on("click",".ms-Dropdown-title",function(e){t(e)}),n.on("keyup",function(s){var a=s.keyCode||s.which;if(e(this).hasClass("is-open")){if(e(this).hasClass("is-open")&&(38===a&&e(this).find(".ms-Dropdown-item.is-selected").prev().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").prev().addClass("is-selected"),40===a&&e(this).find(".ms-Dropdown-item.is-selected").next().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").next().addClass("is-selected"),13===a&&!n.hasClass("is-disabled"))){var o=e(this).find(".ms-Dropdown-item.is-selected").text();e(this).find(".ms-Dropdown-title").html(o),i.find("option").each(function(t,n){n.text===o?e(this).prop("selected",!0):e(this).prop("selected",!1)}),i.change(),e(this).removeClass("is-open")}}else(13===a||38===a||40===a)&&(t(s),e(this).find(".ms-Dropdown-item").hasClass("is-selected")||e(this).find(".ms-Dropdown-item:first").addClass("is-selected"));27===a&&e(this).removeClass("is-open")}),n.on("click",".ms-Dropdown-item",function(){if(!n.hasClass("is-disabled")){e(this).siblings(".ms-Dropdown-item").removeClass("is-selected"),e(this).addClass("is-selected"),e(this).parents().siblings(".ms-Dropdown-title").html(e(this).text());var t=e(this).text();i.find("option").each(function(n,i){i.text===t?e(this).prop("selected",!0):e(this).prop("selected",!1)}),i.change()}})})}}(jQuery),function(e){e.fn.ListItem=function(){return this.each(function(){var t=e(this);t.on("click",".js-toggleSelection",function(t){e(this).parents(".ms-ListItem").toggleClass("is-selected");
+})})}}(jQuery);var fabric=fabric||{};fabric.MessageBanner=function(e){this.container=e,this.init()},fabric.MessageBanner.prototype=function(){var e,t,n,i,s,a,o,r,c,l=700,d=88,u=35,m=480,h=function(e){n=o.offsetWidth,window.innerWidth>=m?f():p()},f=function(){n-t>s&&l>s?(i="auto",a.className="ms-MessageBanner-expand",y()):(i=Math.min(n-t,l)+"px",-1===a.className.indexOf("is-visible")&&(a.className+=" is-visible")),e.style.width=i},p=function(){n-(u+c.offsetWidth)>s?(i="auto",y()):i=n-(u+c.offsetWidth)+"px",e.style.width=i},v=function(n){o=n.container,e=n.container.querySelector(".ms-MessageBanner-clipper"),a=n.container.querySelector(".ms-MessageBanner-expand"),r=n.container.querySelector(".ms-MessageBanner-action"),t=r.offsetWidth+d,c=n.container.querySelector(".ms-MessageBanner-close")},g=function(){var e=a.querySelector(".ms-Icon");o.className+=" is-expanded",e.className="ms-Icon ms-Icon--chevronsUp"},y=function(){var e=a.querySelector(".ms-Icon");o.className="ms-MessageBanner",e.className="ms-Icon ms-Icon--chevronsDown"},k=function(){o.className.indexOf("is-expanded")>-1?y():g()},b=function(){-1===o.className.indexOf("hide")&&(o.className+=" hide",setTimeout(function(){o.className="ms-MessageBanner is-hidden"},500))},C=function(){o.className="ms-MessageBanner"},P=function(){window.addEventListener("resize",h,!1),a.addEventListener("click",k,!1),c.addEventListener("click",b,!1)},x=function(){v(this),P(),n=o.offsetWidth,s=e.offsetWidth,h(null)};return{init:x,showBanner:C}}(),function(e){e.fn.NavBar=function(){return this.each(function(){var t=e(this);t.on("click",".js-openMenu",function(e){e.stopPropagation(),t.toggleClass("is-open")}),t.click(function(){t.hasClass("is-open")&&t.removeClass("is-open")}),t.on("click",".ms-NavBar-item:not(.is-disabled)",function(n){var i=t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field");n.stopPropagation(),0===e(this).children(".ms-NavBar-link").length&&n.preventDefault(),e(this).siblings(".ms-NavBar-item").removeClass("is-selected"),i.length>0&&0===i.val().length&&e(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur(),e(this).hasClass("ms-NavBar-item--hasMenu")?(e(this).children(".ms-ContextualMenu:first").toggleClass("is-open"),e(this).toggleClass("is-selected")):(e(this).addClass("is-selected"),t.removeClass("is-open").find(".ms-ContextualMenu").removeClass("is-open")),e(this).hasClass("ms-NavBar-item--search")&&(e(this).addClass("is-open"),e(this).find(".ms-TextField-field").focus(),t.find(".ms-ContextualMenu:first").removeClass("is-open"))}),t.on("click",".ms-NavBar-item .ms-ContextualMenu",function(n){n.stopPropagation(),e(this).removeClass("is-open"),t.removeClass("is-open").find(".ms-NavBar-item--hasMenu").removeClass("is-selected")}),e(document).on("click","html",function(e){var n=t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field");t.find(".ms-NavBar-item").removeClass("is-selected").find(".ms-ContextualMenu").removeClass("is-open"),n.length>0&&0===n.val().length&&t.find(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur()})})}}(jQuery),function(e){e.fn.Panel=function(){function t(e,t,i){for(var s=0;s<n.length;s++)n[s]||(t=t.toLowerCase()),e.addEventListener(n[s]+t,i,!1)}var n=["webkit","moz","MS","o",""];return this.each(function(){var n=e(this),i=n.find(".ms-Panel-main");e(".ms-PanelAction-close").on("click",function(){n.addClass("ms-Panel-animateOut")}),e(".ms-PanelAction-open").on("click",function(){n.addClass("is-open"),n.addClass("ms-Panel-animateIn")}),t(i[0],"AnimationEnd",function(e){e.animationName.indexOf("Out")>-1&&(n.removeClass("is-open"),n.removeClass("ms-Panel-animateIn ms-Panel-animateOut"))})})}}(jQuery),function(e){function t(e){var t=e.find(".ms-PeoplePicker-searchBox"),n=t.position().left,i=t.outerWidth(),s=n+i,a=t.find(".ms-PeoplePicker-persona:last"),o=a.offset().left,r=a.outerWidth(),c=o+r,l=s-c-7;100>l&&(l="100%"),e.find(".ms-PeoplePicker-searchField").outerWidth(l)}e.fn.PeoplePicker=function(){return this.each(function(){function n(t){e("html, body").animate({scrollTop:s.offset().top},367),e(".ms-PeoplePicker").hasClass("is-active")&&e(".ms-PeoplePicker").removeClass("is-active"),d=!0,t.stopPropagation(),o.width(s.width()-2),s.addClass("is-active"),e(document).bind("click.peoplepicker",function(t){s.removeClass("is-active"),e(document).unbind("click.peoplepicker"),d=!1})}var i,s=e(this),a=s.find(".ms-PeoplePicker-searchField"),o=s.find(".ms-PeoplePicker-results"),r=(s.find(".ms-PeoplePicker-searchMore"),s.find(".ms-PeoplePicker-selected")),c=s.find(".ms-PeoplePicker-selectedPeople"),l=s.find(".ms-PeoplePicker-selectedCount"),d=!1;s.on("focus",".ms-PeoplePicker-searchField",function(e){n(e)}),s.on("click",".ms-PeoplePicker-searchField",function(e){n(e)}),e(this).click(function(e){e.stopPropagation()}),o.on("click",".ms-PeoplePicker-result",function(n){var i=e(this).find(".ms-Persona-primaryText").html(),o=e(this).find(".ms-Persona-secondaryText").html(),d='<div class="ms-PeoplePicker-persona"><div class="ms-Persona ms-Persona--xs ms-Persona--square"><div class="ms-Persona-imageArea"><i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i><img class="ms-Persona-image" src="../persona/Persona.Person2.png"></div><div class="ms-Persona-presence"></div><div class="ms-Persona-details"><div class="ms-Persona-primaryText">'+i+'</div> </div></div><button class="ms-PeoplePicker-personaRemove"><i class="ms-Icon ms-Icon--x"></i> </button></div>',u='<li class="ms-PeoplePicker-selectedPerson"><div class="ms-Persona ms-Persona--square"><div class="ms-Persona-imageArea"><i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i><img class="ms-Persona-image" src="../persona/Persona.Person2.png"><div class="ms-Persona-presence"></div></div><div class="ms-Persona-details"><div class="ms-Persona-primaryText">'+i+'</div><div class="ms-Persona-secondaryText">'+o+'</div></div></div><button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button></li>';if(s.hasClass("ms-PeoplePicker--facePile")){r.hasClass("is-active")||r.addClass("is-active"),c.prepend(u),s.removeClass("is-active");var m=s.find(".ms-PeoplePicker-selectedPerson").length;l.html(m)}else a.before(d),s.removeClass("is-active"),t(s)}),s.on("click",".ms-PeoplePicker-personaRemove",function(n){e(this).parents(".ms-PeoplePicker-persona").remove(),0==e(".ms-PeoplePicker-persona").length?s.find(".ms-PeoplePicker-searchField").outerWidth("100%"):t(s)}),o.on("click",".js-searchMore",function(t){var n=e(this),s=n.find(".ms-PeoplePicker-searchMorePrimary"),a=s.html();n.addClass("is-searching"),s.html("Searching for &ldquo;Sen&rdquo;"),i?i.start():i=new fabric.Spinner(n.get(0)),setTimeout(function(){n.removeClass("is-searching"),s.html(a),i.stop()},3e3)}),o.on("click",".js-resultRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").remove()}),o.on("click",".js-resultExpand",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded")}),c.on("click",".js-selectedRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-selectedPerson").remove();var n=s.find(".ms-PeoplePicker-selectedPerson").length;l.html(n),0===s.find(".ms-PeoplePicker-selectedPerson").length&&r.removeClass("is-active")})})}}(jQuery),function(e){e.fn.PersonaCard=function(){return this.each(function(){var t=e(this);t.on("click",".ms-PersonaCard-action",function(){t.find(".ms-PersonaCard-action").removeClass("is-active"),e(this).addClass("is-active");var n=function(e,t){var n=e.className+"",i=t.charAt(0).toUpperCase()+t.slice(1),s="ms-PersonaCard-detail"+i;n!=s&&(e.classList.remove(n),e.classList.add(s))},i=e(this).attr("id");n(e(this).parent().next().find("#detailList")[0],i);var s=e(this).attr("id");t.find(".ms-PersonaCard-actionDetails").removeClass("is-active"),t.find("#"+s+".ms-PersonaCard-actionDetails").addClass("is-active")}),t.on("click",".ms-PersonaCard-detailExpander",function(){e(this).parent(".ms-PersonaCard-actionDetails").toggleClass("is-collapsed")})})}}(jQuery),function(e){e.fn.Pivot=function(){return this.each(function(){var t=e(this);t.on("click",".ms-Pivot-link",function(t){t.preventDefault(),e(this).siblings(".ms-Pivot-link").removeClass("is-selected"),e(this).addClass("is-selected")})})}}(jQuery);var fabric=fabric||{};fabric.ProgressIndicator=function(e){this.container=e,this.cacheDOM()},fabric.ProgressIndicator.prototype=function(){var e,t,n,i,s,a,o=function(e){a.style.width=Math.round(t*e)+"px"},r=function(t){e=t;var n=e/i;this.setProgressPercent(n)},c=function(e){i=e},l=function(e){n.innerHTML=e},d=function(e){s.innerHTML=e},u=function(){n=this.container.querySelector(".ms-ProgressIndicator-itemName")||null,s=this.container.querySelector(".ms-ProgressIndicator-itemDescription")||null,a=this.container.querySelector(".ms-ProgressIndicator-progressBar"),t=this.container.querySelector(".ms-ProgressIndicator-itemProgress").offsetWidth};return{setProgressPercent:o,setName:l,setDescription:d,setProgress:r,setTotal:c,cacheDOM:u}}(),function(e){e.fn.SearchBox=function(){return this.each(function(){var t=!1,n=e(this).find(".ms-SearchBox-field");n.on("focus",function(){e(this).siblings(".ms-SearchBox-label").hide(),e(this).parent(".ms-SearchBox").addClass("is-active")}),n.on("mouseover",function(){n.addClass("hovering")}),n.on("mouseout",function(){n.removeClass("hovering")}),e(this).find(".ms-SearchBox-closeButton").on("mousedown",function(){t=!0}),e(this).find(".ms-SearchBox-field").on("blur",function(){t&&(e(this).val(""),n.addClass("hovering"));var i=e(this).parent(".ms-SearchBox");setTimeout(function(){i.removeClass("is-active")},10),0===e(this).val().length&&e(this).siblings(".ms-SearchBox-label").show(),t=!1})})}}(jQuery);var fabric=fabric||{};fabric.Spinner=function(e){function t(){d=setInterval(function(){for(var e=v.length;e--;)a(v[e])},g)}function n(){clearInterval(d)}function i(){h=p,m=8,l(),s(),t()}function s(){var e,t=0,n=1;for(y=1/m,t;m>t;t++){var i=v[t];e=y*n++,r(i.element,e)}}function a(e){var t=o(e.element)-y;0>=t&&(t=1),r(e.element,t)}function o(e){return parseFloat(window.getComputedStyle(e).getPropertyValue("opacity"))}function r(e,t){e.style.opacity=t}function c(){var e=document.createElement("div"),t=parseInt(window.getComputedStyle(u).getPropertyValue("width"),10);return e.className="ms-Spinner-circle",e.style.width=e.style.height=t*h+"px",e}function l(){-1===f.className.indexOf("ms-Spinner")?(u=document.createElement("div"),u.className="ms-Spinner",f.appendChild(u)):u=f;for(var e,t=u.clientWidth,n=u.clientHeight,i=0,s=t*h,a=2*Math.PI/m,o=m,r=.5*(t-s);o--;){var l=c(),d=Math.round(.5*t+r*Math.cos(i)-.5*l.clientWidth)-.5*s,p=Math.round(.5*n+r*Math.sin(i)-.5*l.clientHeight)-.5*s;u.appendChild(l),l.style.left=d+"px",l.style.top=p+"px",i+=a,e={element:l,j:o},v.push(e)}}var d,u,m,h,f=e,p=.179,v=[],g=90,y=0;return i(),{start:t,stop:n}},function(e){e.fn.TextField=function(){return this.each(function(){e(this).hasClass("ms-TextField--placeholder")&&(e(this).on("click",function(){e(this).find(".ms-Label").hide()}),e(this).find(".ms-TextField-field").on("blur",function(){0===e(this).val().length&&e(this).siblings(".ms-Label").show()})),e(this).hasClass("ms-TextField--underlined")&&(e(this).find(".ms-TextField-field").on("focus",function(){e(this).parent(".ms-TextField--underlined").addClass("is-active")}),e(this).find(".ms-TextField-field").on("blur",function(){e(this).parent(".ms-TextField--underlined").removeClass("is-active")}))})}}(jQuery);

dist/samples/Components/CommandBar/Jquery.CommandBar.js

@@ -22,9 +22,11 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
         var $Item = $(this);
-        var $rightOffset = ($Item.offset().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.offset().left; // Added padding of 10
+        var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10
         commands.push({ jquery: $Item, rightOffset: $rightOffset});
+        console.log($Item.outerWidth(), index, $commandarea.position().left, $Item.position().left);
       });
+
       return commands;
     }
 
-    var processCommands = function(commands, width) {
+    var processCommands = function(commands, width, overflowwidth) {
         var overFlowCommands = [];
@@ -38,3 +40,3 @@
           if(!$Item.hasClass('ms-CommandBarItem-overflow')) {
-            if(rightOffset > width) {
+            if((rightOffset + overflowwidth) > width) {
               overFlowCommands.push($Item);
@@ -59,3 +61,2 @@ } else {
           // Add overflowed commands to ContextualMenu
-
           for(i = 0; i < overFlowCommands.length; i++) {
@@ -78,3 +79,3 @@ var $Item = $(overFlowCommands[i]);
       var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea');
-      var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem');
+      var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow');
       var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow');
@@ -92,10 +93,10 @@ var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth();
       // Initiate process commands and add commands to overflow on load
-      overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
+      overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
       processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
       // Set Search Behavior
-      if($(window).width() < 640) {
+      if($(window).width() < 640) { 
 
-        $('.ms-CommandBarSearch').click(function() {
-          $(this).addClass('is-active');
+        $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+          $(this).closest('.ms-CommandBarSearch').addClass('is-active');
         });
@@ -108,22 +109,36 @@
         var overFlowCommands;
-        overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
-        processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
         if($(window).width() < 640 && mobileSwitch == false) {
+
+          console.log("Switching to mobile");
+
+          // Go through process and save commands
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+         
           mobileSwitch = true;
 
           // Search Behavior
-          $('.ms-CommandBarSearch').unbind();
-          $('.ms-CommandBarSearch').click(function() {
-            $(this).addClass('is-active');
+          $('.ms-CommandBarSearch-iconSearchWrapper').unbind();
+          $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+            $(this).closest('.ms-CommandBarSearch').addClass('is-active');
           });
 
         } else if($(window).width() > 639 && mobileSwitch == true) {
+
+          console.log("Switching to Desktop");
+
+          // Go through process and save commands
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
           mobileSwitch = false;
-
           $('.ms-CommandBarSearch').unbind();
-        }
 
+        } 
+
+        console.log(allCommands, $CommandMainArea.innerWidth());
+
+        // Initiate process commands and add commands to overflow on load
+        overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+        processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+      
       });
@@ -136,2 +151,6 @@
 
+      $OverflowCommand.focusout(function() {
+        $OverflowMenu.removeClass('is-open');
+      });
+
       $SearchBox.find('.ms-CommandBarSearch-input').click(function() {
@@ -141,2 +160,6 @@ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
 
+      $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() {
+        $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+      });
+
        // When clicking the x clear the SearchBox and put state back to normal
@@ -143,0 +166,0 @@ $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {

dist/samples/Components/DatePicker/Jquery.DatePicker.js

@@ -6,164 +6,85 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
   /**
-   * @param {object} options DatePicker options
-   * @param {array} options.optionMonths An array of month abbreviations for the options grid
-   * @param {string} options.label A label for the DatePicker
-   * @param {string} options.placeholderText Placeholder text for the DatePicker textfield
+   * DatePicker Plugin
    */
+
   $.fn.DatePicker = function (options) {
 
-    var datePicker;
-    var self = this;
-    var optionMonths = options && options.optionMonths || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    var label = options && options.label || "Start Date";
-    var placeholderText = options && options.placeholderText || "Select a date";
+    return this.each(function () {
 
-    /** check if the PickaDate plugin exists, if not load the plugin */
-    if (!$().pickadate) {
-      var firstScript = document.getElementsByTagName("script")[0];
-      var script = document.createElement("script");
-      script.onload = returnDatePicker;
-      script.src = "PickaDate.js";
-      firstScript.parentNode.insertBefore(script, firstScript);
-    } else {
-      datePicker = returnDatePicker();
-    }
+      /** Set up variables and run the Pickadate plugin. */
+      var $datePicker = $(this);
+      var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({
+        // Strings and translations.
+        weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
 
-    function returnDatePicker() {
-      /** Iterate through each date picker provided. */
-      return self.each(function () {
+        // Don't render the buttons
+        today: '',
+        clear: '',
+        close: '',
 
-        var $datePicker = $(this);
+        // Events
+        onStart: function() {
+          initCustomView($datePicker);
+        },
 
-        /**create the body of the datepicker */
-        appendElements($datePicker, optionMonths);
+        // Classes
+        klass: {
 
-        /** insert label and placeholder text */
-        $datePicker.find('.ms-Label').text(label);
-        $datePicker.find('.ms-TextField-field').attr("placeholder", placeholderText + "...");
+          // The element states
+          input: 'ms-DatePicker-input',
+          active: 'ms-DatePicker-input--active',
 
-        /** Set up variables and run the Pickadate plugin. */
-        var $dateField = $datePicker.find('.ms-TextField-field').pickadate({
-          // Strings and translations.
-          weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+          // The root picker and states
+          picker: 'ms-DatePicker-picker',
+          opened: 'ms-DatePicker-picker--opened',
+          focused: 'ms-DatePicker-picker--focused',
 
-          // Don't render the buttons
-          today: '',
-          clear: '',
-          close: '',
+          // The picker holder
+          holder: 'ms-DatePicker-holder',
 
-          // Events
-          onStart: function() {
-            initCustomView($datePicker);
-          },
+          // The picker frame, wrapper, and box
+          frame: 'ms-DatePicker-frame',
+          wrap: 'ms-DatePicker-wrap',
+          box: 'ms-DatePicker-dayPicker',
 
-          // Classes
-          klass: {
+          // The picker header
+          header: 'ms-DatePicker-header',
 
-            // The element states
-            input: 'ms-DatePicker-input',
-            active: 'ms-DatePicker-input--active',
+          // Month & year labels
+          month: 'ms-DatePicker-month',
+          year: 'ms-DatePicker-year',
 
-            // The root picker and states
-            picker: 'ms-DatePicker-picker',
-            opened: 'ms-DatePicker-picker--opened',
-            focused: 'ms-DatePicker-picker--focused',
+          // Table of dates
+          table: 'ms-DatePicker-table',
 
-            // The picker holder
-            holder: 'ms-DatePicker-holder',
+          // Weekday labels
+          weekdays: 'ms-DatePicker-weekday',
 
-            // The picker frame, wrapper, and box
-            frame: 'ms-DatePicker-frame',
-            wrap: 'ms-DatePicker-wrap',
-            box: 'ms-DatePicker-dayPicker',
+          // Day states
+          day: 'ms-DatePicker-day',
+          disabled: 'ms-DatePicker-day--disabled',
+          selected: 'ms-DatePicker-day--selected',
+          highlighted: 'ms-DatePicker-day--highlighted',
+          now: 'ms-DatePicker-day--today',
+          infocus: 'ms-DatePicker-day--infocus',
+          outfocus: 'ms-DatePicker-day--outfocus',
 
-            // The picker header
-            header: 'ms-DatePicker-header',
+        }
+      },options||{}));
+      var $picker = $dateField.pickadate('picker');
 
-            // Month & year labels
-            month: 'ms-DatePicker-month',
-            year: 'ms-DatePicker-year',
-
-            // Table of dates
-            table: 'ms-DatePicker-table',
-
-            // Weekday labels
-            weekdays: 'ms-DatePicker-weekday',
-
-            // Day states
-            day: 'ms-DatePicker-day',
-            disabled: 'ms-DatePicker-day--disabled',
-            selected: 'ms-DatePicker-day--selected',
-            now: 'ms-DatePicker-day--today',
-            infocus: 'ms-DatePicker-day--infocus',
-            outfocus: 'ms-DatePicker-day--outfocus'
-          }
-        });
-        var $picker = $dateField.pickadate('picker');
-
-        /** Respond to built-in picker events. */
-        $picker.on({
-          render: function() {
-            updateCustomView($datePicker);
-          },
-          open: function() {
-            scrollUp($datePicker);
-          }
-        });
-
+      /** Respond to built-in picker events. */
+      $picker.on({
+        render: function() {
+          updateCustomView($datePicker);
+        },
+        open: function() {
+          scrollUp($datePicker);
+        }
       });
-    }
 
-    return datePicker;
+    });
   };
 
   /**
-   * Create the body of the DatePicker plugin and
-   * append it to the date picker element
-   * @param {object} $datePicker JQuery object
-   * @param {array} optionMonths
-   */
-  function appendElements($datePicker, optionMonths) {
-    var elements = '<div class="ms-TextField">';
-    elements += '<label class="ms-Label"></label>';
-    elements += '<i class="ms-DatePicker-event ms-Icon ms-Icon--event"></i>';
-    elements += '<input class="ms-TextField-field" type="text">';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-monthComponents">';
-    elements += '<span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '<div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>';
-    elements += '</div>';
-    elements += '<span class="ms-DatePicker-goToday js-goToday">Go to today</span>';
-    elements += '<div class="ms-DatePicker-monthPicker">';
-    elements += '<div class="ms-DatePicker-header">';
-    elements += '<div class="ms-DatePicker-yearComponents">';
-    elements += '<span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-currentYear js-showYearPicker"></div>';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-optionGrid">';
-    elements += '</div></div>';
-    elements += '<div class="ms-DatePicker-yearPicker">';
-    elements += '<div class="ms-DatePicker-decadeComponents">';
-    elements += '<span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '</div></div>';
-    $datePicker.append(elements);
-    $datePicker.find('.ms-DatePicker-optionGrid').append(createMonthOptions(optionMonths));
-  }
-  /**
-   * creates month elements for the month grid
-   * @param {array} optionMonths
-   * @returns {string}
-   */
-  function createMonthOptions(optionMonths) {
-    var i = 0;
-    var content = "";
-    for(i; i < 12; i++) {
-      content += '<span class="ms-DatePicker-monthOption js-changeDate" data-month="' + i + '">' + optionMonths[i] + '</span>';
-    }
-    return content;
-  }
-  /**
    * After the Pickadate plugin starts, this function
@@ -320,4 +241,6 @@ * adds additional controls to the picker view.
 
+
   /** Whenever the picker renders, do our own rendering on the custom controls. */
   function updateCustomView($datePicker) {
+
     /** Get some variables ready. */
@@ -347,3 +270,3 @@ var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
     output += '<div class="ms-DatePicker-optionGrid">';
-    for (year = startingYear; year < (startingYear + 12); year++) {
+    for (var year = startingYear; year < (startingYear + 12); year++) {
       output += '<span class="ms-DatePicker-yearOption js-changeDate" data-year="' + year + '">' + year +'</span>';
@@ -360,3 +283,3 @@ }
   }
-
+  
   /** Scroll the page up so that the field the date picker is attached to is at the top. */
@@ -369,2 +292,2 @@ function scrollUp($datePicker) {
 
-})(jQuery);
+})(jQuery);

dist/samples/Components/Dropdown/Jquery.Dropdown.js

@@ -58,2 +58,7 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
                     $dropdownWrapper.toggleClass('is-open');
+                    $('.ms-Dropdown').each(function(){
+                        if ($(this)[0] !== $dropdownWrapper[0]) {
+                            $(this).removeClass('is-open');
+                        }
+                    });
 
@@ -60,0 +65,0 @@ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */

dist/samples/Components/NavBar/Jquery.NavBar.js

@@ -29,2 +29,3 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
       $navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) {
+        var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
         event.stopPropagation();
@@ -41,3 +42,3 @@
         // Close and blur the search box if it doesn't have text.
-        if ($navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field').val().length === 0) {
+        if ($searchBox.length > 0 && $searchBox.val().length === 0) {
           $('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
@@ -83,6 +84,7 @@ }
       $(document).on('click', 'html', function(event) {
+		var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');  
         $navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open');
 
         // Close and blur the search box if it doesn't have text.
-        if ($navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field').val().length === 0) {
+        if ($searchBox.length > 0 && $searchBox.val().length === 0) {
           $navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
@@ -89,0 +91,0 @@ }

dist/samples/Components/Panel/Jquery.Panel.js

@@ -14,2 +14,12 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
+    var pfx = ["webkit", "moz", "MS", "o", ""];
+
+    // Prefix function
+    function prefixedEvent(element, type, callback) {
+      for (var p = 0; p < pfx.length; p++) {
+        if (!pfx[p]) type = type.toLowerCase();
+        element.addEventListener(pfx[p]+type, callback, false);
+      }
+    }
+
     /** Go through each panel we've been given. */
@@ -22,12 +32,28 @@ return this.each(function () {
       /** Hook to open the panel. */
-      $(".js-togglePanel").on("click", function() {
-        // Panel must be set to display "block" in order for animations to render
-        $panelMain.css({display: "block"});
-        $panel.toggleClass("is-open");
+      $(".ms-PanelAction-close").on("click", function() {
+
+        // Display Panel first, to allow animations
+        $panel.addClass("ms-Panel-animateOut");
+
       });
 
-      $panelMain.on("animationend webkitAnimationEnd MSAnimationEnd", function(event) {
-        if (event.originalEvent.animationName === "fadeOut") {
+      $(".ms-PanelAction-open").on("click", function() {
+
+        // Display Panel first, to allow animations
+        $panel.addClass("is-open");
+
+        // Add animation class
+        $panel.addClass("ms-Panel-animateIn");
+
+      });
+
+      prefixedEvent($panelMain[0], 'AnimationEnd', function(event) {
+        if (event.animationName.indexOf('Out') > -1) {
+
           // Hide and Prevent ms-Panel-main from being interactive
-          $(this).css({display: "none"});
+          $panel.removeClass('is-open');
+
+          // Remove animating classes for the next time we open panel
+          $panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut');
+
         }
@@ -34,0 +60,0 @@ });

dist/samples/Components/PersonaCard/Jquery.PersonaCard.js

@@ -27,4 +27,3 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
         /** Function for switching selected item into view by adding a class to ul. */
-        var updateForItem = function(item){
-          var wrapper = document.getElementById("detailList");
+        var updateForItem = function(wrapper, item){
           var previousItem = wrapper.className + "";
@@ -42,3 +41,3 @@ var detail = item.charAt(0).toUpperCase() + item.slice(1);
         /** Add detail class to ul to switch it into view. */
-        updateForItem(el);
+        updateForItem($(this).parent().next().find('#detailList')[0], el);
 
@@ -45,0 +44,0 @@ /** Display the corresponding details. */

dist/samples/Components/SearchBox/Jquery.SearchBox.js

@@ -18,5 +18,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
       var cancel = false;
+      var $searchField = $(this).find('.ms-SearchBox-field');
 
       /** SearchBox focus - hide label and show cancel button */
-      $(this).find('.ms-SearchBox-field').on('focus', function() {
+      $searchField.on('focus', function() {
         /** Hide the label on focus. */
@@ -28,3 +29,11 @@ $(this).siblings('.ms-SearchBox-label').hide();
 
+      /** 'hovering' class allows for more fine grained control of hover state */
+      $searchField.on('mouseover', function() {
+        $searchField.addClass('hovering')
+      });
 
+      $searchField.on('mouseout', function() {
+        $searchField.removeClass('hovering');
+      });
+
       // If cancel button is selected, change cancel value to true
@@ -39,10 +48,14 @@ $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() {
         // If cancel button is selected remove the text and show the label
-        if ( cancel == true ) {
+        if (cancel) {
           $(this).val('');
-          $(this).siblings('.ms-SearchBox-label').show();
+          $searchField.addClass('hovering');
         }
-
-        // Remove is-active class - hides cancel button
-        $(this).parent('.ms-SearchBox').removeClass('is-active');
-
+        
+        var $searchBox = $(this).parent('.ms-SearchBox');
+        // Prevents inputfield from gaining focus too soon
+        setTimeout(function() {
+          // Remove is-active class - hides cancel button
+          $searchBox.removeClass('is-active');
+        }, 10);
+        
         /** Only do this if no text was entered. */
@@ -56,4 +69,2 @@ if ($(this).val().length === 0 ) {
       });
-
-
     });
@@ -60,0 +71,0 @@

dist/samples/Components/Spinner/Spinner.js

@@ -17,13 +17,10 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
  * @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
- * @param {string} type - The type of spinner. Set this property to "sixteen" for sixteen dot version. The default is eight.
  */
 
-fabric.Spinner = function(target, spinnerType) {
+fabric.Spinner = function(target) {
 
     var _target = target;
-    var _spinnerType = spinnerType || "eight";
-    var eightSize = 0.18;
-    var sixteenSize = 0.1;
+    var eightSize = 0.179;
     var circleObjects = [];
-    var animationSpeed = 100;
+    var animationSpeed = 90;
     var interval;
@@ -33,2 +30,3 @@ var spinner;
     var offsetSize;
+    var fadeIncrement = 0;
 
@@ -59,9 +57,4 @@ /**
     function _init() {
-        if(_spinnerType === "sixteen") {
-            offsetSize = sixteenSize;
-            numCircles = 16;
-        } else {
-            offsetSize = eightSize;
-            numCircles = 8;
-        }
+        offsetSize = eightSize;
+        numCircles = 8;
         _createCirclesAndArrange();
@@ -73,8 +66,11 @@ _initializeOpacities();
     function _initializeOpacities() {
-        var i = numCircles, j;
-        while(i--) {
-            j = circleObjects.length;
-            while(j--) {
-                _fade(circleObjects[j]);
-            }
+        var i = 0;
+        var j = 1;
+        var opacity;
+        fadeIncrement = 1 / numCircles;
+
+        for (i; i < numCircles; i++) {
+            var circleObject = circleObjects[i];
+            opacity = (fadeIncrement * j++);
+            _setOpacity(circleObject.element, opacity);
         }
@@ -84,15 +80,9 @@ }
     function _fade(circleObject) {
-        var opacity;
-        if(circleObject.j < numCircles) {
-            if(Math.floor(circleObject.j / (numCircles / 2))) {
-                opacity = _getOpacity(circleObject.element) - 2 / numCircles;
-            } else{
-                opacity = _getOpacity(circleObject.element) + 2 / numCircles;
-            }
-        } else {
-            circleObject.j = 0;
-            opacity = 2/ numCircles;
+        var opacity = _getOpacity(circleObject.element) - fadeIncrement;
+
+        if (opacity <= 0) {
+            opacity = 1;
         }
+
         _setOpacity(circleObject.element, opacity);
-        circleObject.j++;
     }
@@ -118,3 +108,3 @@
         //for backwards compatibility
-        if (_target.className !== "ms-Spinner") {
+        if (_target.className.indexOf("ms-Spinner") === -1) {
             spinner = document.createElement("div");
@@ -126,3 +116,3 @@ spinner.className = "ms-Spinner";
         }
-        
+
         var width = spinner.clientWidth;
@@ -136,3 +126,4 @@ var height = spinner.clientHeight;
         var radius = (width- offset) * 0.5;
-        while(i--) {
+
+        while (i--) {
             var circle = _createCircle();
@@ -139,0 +130,0 @@ var x = Math.round(width * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;

ghdocs/CONTRIBUTING.md

@@ -1,3 +0,1 @@
-![Office UI Fabric](http://odux.azurewebsites.net/github/img/OfficeUIFabricLogoBluePadSm-01.png)
-
 #Contributing
@@ -13,2 +11,3 @@
 
+### Pull Requests
 We gladly welcome PRs regarding…
@@ -20,6 +19,12 @@ - Bug fixes (of course!)
 
+### Feature Requests
 Please be sure to open an issue before starting a hefty PR so we can let you know if we're likely to consider your request--and to make sure we aren't already planning on doing the work.
 
-##Labels for Issue Tracker
+### Contribution License Agreement
+For pull requests affecting fewer than 15 lines of code, you will need to sign a [Contribution License Agreement (CLA)](https://cla.microsoft.com/) before your contribution can be incorporated. To complete the CLA, you will need to submit the request via the form and then electronically sign the CLA when you receive the email containing the link to the document.
 
+This needs to only be done once for any Microsoft open source project.
+
+### Labels for Issue Tracker
+
 We track community issues via Github's issue tracker. To help us keep track of the different areas, please use the following labels:
@@ -26,0 +31,0 @@

ghdocs/TUTORIAL.md

 # Fabric Tutorial Part 1
 
-###Contents
+### Contents
 
@@ -23,3 +23,3 @@ - [Overview](#overview)
 
-Components are snippets of HTML and CSS that can be used in any application as a skin for common UI elements like Textfields, Toggle Switches, Lists, and People Pickers. Fabric's components exist in Microsoft products today and are used by millions of customers. Components can be manipulated fairly easily, and in this tutorial, we will be tweaking a few of them.
+Components are snippets of HTML and CSS that can be used in any application as a skin for common UI elements like Textfields, Toggle Switches, Lists, and People Pickers. Fabric's components exist in Microsoft products today and are used by millions of customers. Components can be manipulated fairly easily, and, in this tutorial, we will be tweaking a few of them.
 
@@ -52,3 +52,3 @@ Now, let's get started building our application.
 
-Download Fabric, unzip it, and copy **fabric.css** and **fabric.components.css** into your **css/** folder. Then add the following lines to the `<head>` section of your index.html document:
+Go [here to download the latest .zip of Fabric  (the first zip "office-ui-fabrc-[version].zip")](https://github.com/OfficeDev/Office-UI-Fabric/releases/latest), and then extract the contents. Then go into `/dist/css` and copy **fabric.css** and **fabric.components.css** into your `todo/css/` project folder. Then add the following lines to the `<head>` section of your index.html document:
 
@@ -65,4 +65,6 @@
 
-We will now create a CSS file for your application, which we'll use to add custom styles and to override Fabric component styles where necessary.  Create a new file titled **app.css** in your css/ directory and add a link to it _after_ fabric.components.css in index.html:
+### Create a new style sheet for our application
 
+We will now create a CSS file for your application, which we'll use to add custom styles and to override Fabric component styles where necessary.  Create a new file titled **app.css** in your `todo/css/` directory and add a link to it _after_ fabric.components.css in index.html:
+
 ```html
@@ -74,3 +76,3 @@ <link href="css/fabric.css" type="text/css" rel="stylesheet" />
 
-NOTE: It's important that app.css goes _after_ Fabric's CSS files to ensure that any application-specific styles there will have a high enough specificity to override Fabric styles if necessary. While Fabric does have a lot great pre-existing styles, you may need tweak them to fit your application's specific requirements. 
+**_NOTE_**: It's important that app.css goes _after_ Fabric's CSS files to ensure that any application-specific styles there will have a high enough specificity to override Fabric styles if necessary. While Fabric does have a lot great pre-existing styles, you may need tweak them to fit your application's specific requirements. 
 
@@ -133,3 +135,2 @@ At this point, your directory should look like this:
 .TodoList {
-  float: left;
   width: 100%;
@@ -162,3 +163,3 @@ height: auto;
 
-Fabric includes a responsive grid system, similar to those seen in other UI toolkits, that we will use for our TodoBar section. Let's add the following HTML inside  `<div class="TodoBar"></div>`:
+Fabric includes a responsive grid system, similar to those seen in other UI toolkits, that we will be using for our TodoBar section. Let's add the following HTML inside  `<div class="TodoBar"></div>`:
 
@@ -168,4 +169,4 @@ ```html
   <div class="ms-Grid-row">
-    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10"></div>
-    <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2"></div>
+    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10"></div> <!-- First Column -->
+    <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2"></div> <!-- Second Column -->
   </div>
@@ -175,3 +176,3 @@ </div>
 
-Now for the fun part: let's add some component HTML into our ToDo app. Navigate to where you extracted your .zip of Fabric, then open the following component files in your code editor:
+Now for the fun part: let's add some component HTML into our ToDo app. Navigate to where you extracted Fabric, then open the following component files in your code editor:
 
@@ -183,24 +184,46 @@ ```
 
-First, copy all the contents from TextField.html and paste it into the first `.ms-Grid-col ` `<div>`, then remove the `<label>` element. The HTML should look now like this:
+First, copy all the contents from TextField.html and paste it inside of the first column `<div class="ms-Grid-col"></div> <!-- First Column -->`, then remove the `<label class="ms-Label">Name</label>` element and `<span class="ms-TextField-description">This should be your first and last name.</span>`.  At this point your second column HTML should look like this:
 
 ```html
 <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
-  <div class="ms-TextField">
-    <input class="ms-TextField-field">
-  </div>
-</div>
+    <div class="ms-TextField">
+        <input class="ms-TextField-field">
+    </div>
+</div> <!-- First Column -->
 ```
 
-NOTE: We are removing the `<label>` element because we don't need it in this example. Fabric components can be customized fairly easily.
+**_NOTE_**: We are removing the `<label>` and `<span>` elements because we don't need them in this example.
 
-Copy all the contents from Button.html and paste it into our second column. Let's tweak the text as well by changing **Create account** to **Add Todo** and changing the description to say **Add a todo task to the list**. After all that, it should look like the following:
+Copy all the contents from Button.html and paste it into our second column `<div class="ms-Grid-col"></div> <!-- Second Column -->`. Now change the text inside of the button `<span class="ms-Button-label">` from **Create account** to **Add Todo**. We should also remove `<span class="ms-Button-description"></span>` After the past few edits, your **index.html** should look like the following:
 
 ```html
-<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
-  <button class="ms-Button">
-    <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
-    <span class="ms-Button-label">Add Todo</span>
-    <span class="ms-Button-description">Add a todo task to the list</span>
-  </button>
-</div>
+<!DOCTYPE html>
+<html>
+  <head>
+      <link href="css/fabric.css" type="text/css" rel="stylesheet" />
+      <link href="css/fabric.components.css" type="text/css" rel="stylesheet" />
+      <link href="css/app.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+      <div class="TodoBar">
+        <div class="ms-Grid">
+            <div class="ms-Grid-row">
+                <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
+                    <div class="ms-TextField">
+                        <input class="ms-TextField-field">
+                    </div>
+                </div> <!-- First Column -->
+                <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
+                    <button class="ms-Button">
+                        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
+                        <span class="ms-Button-label">Add Todo</span>
+                    </button>
+                </div> <!-- Second Column -->
+            </div>
+        </div>
+      </div>
+      <div class="TodoList"></div>
+  </body>
+</html>
 ```
@@ -220,3 +243,2 @@
 .ListHeader {
-  float: left;
   width: 100%;
@@ -231,3 +253,3 @@ height: auto;
 
-After that we should have plain-looking title inside a white strip. Let's change that with a few Fabric typography classes: add `ms-font-xxl` and `ms-fontWeight-light` after the ListHeader class on your title element. Our ListHeader should now look like the following:
+Now we should have a simple title inside a white strip. Let's change that with a few Fabric typography classes: add `ms-font-xxl` and `ms-fontWeight-light` after the ListHeader class on   our  `<div class="ListHeader">Todo List</div>` element. This element should now look like the following:
 
@@ -238,3 +260,3 @@ ```html
 
-NOTE: `.ms-font-xxl` is a "base" typography class, each of which sets a size, color, font-family, and weight. `.ms-fontWeight-light` is one of several helper classes that override a single property and should usually be combined with a base typography class.
+**_NOTE_**: `.ms-font-xxl` is a "base" typography class, each of which sets a size, color, font-family, and weight. `.ms-fontWeight-light` is one of several helper classes that override a single property and should usually be combined with a base typography class.
 
@@ -245,3 +267,3 @@ ## Step 6 – Adding more complex components
 
-Go ahead and open up `dist/components/List/List.html` from your extracted Fabric .zip into your text editor, then copy all of the contents and paste it inside of `<div class="TodoList"></div>`. Your code should now look like this:
+Go ahead and open up `dist/components/List/List.html` from your extracted Fabric .zip into your text editor, then copy all of the contents and paste it inside of `<div class="TodoList"></div>`. This div should now look like the following:
 
@@ -284,7 +306,12 @@ ```html
 
-Now, let's remove the background colors we used to test our two container `<divs> (.TodoList, .TodoBar)`. Their styles should now look like the following:
+Now, let's remove the background colors ( `background-color: #000000;`, `background-color: #cdcdcd;`) we used to test `<div class="TodoBar"></div>` and `<div class="TodoList></div>`. Your **app.css** file should look like the following:
 
 ```css
+html, 
+body {
+  margin: 0;
+}
+
 .TodoBar {
-  position: fixed;
+  position: fixed; /* This bar should always be fixed to the top */
   top: 0;
@@ -295,8 +322,5 @@ left: 0;
   z-index: 2;
-  background-color: #000000;
 }
 
 .TodoList {
-  float: left;
-  margin-top: 60px;
   width: 100%;
@@ -306,8 +330,161 @@ height: auto;
   min-height: 200px;
-  background-color: #000000;
 }
+
+.ListHeader {
+  width: 100%;
+  height: auto;
+  margin-top: 60px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+}
 ```
 
-Here is what your app should look like at this moment:
 
+ And here is what your HTML should look like:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+      <link href="css/fabric.css" type="text/css" rel="stylesheet" />
+      <link href="css/fabric.components.css" type="text/css" rel="stylesheet" />
+      <link href="css/app.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+      <div class="TodoBar">
+        <div class="ms-Grid">
+            <div class="ms-Grid-row">
+                <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
+                    <div class="ms-TextField">
+                        <input class="ms-TextField-field">
+                        <span class="ms-TextField-description">This should be your first and last name.</span>
+                    </div>
+                </div> <!-- First Column -->
+                <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
+                    <button class="ms-Button">
+                        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
+                        <span class="ms-Button-label">Add ToDo</span>
+                        <span class="ms-Button-description">Description of the action this button takes</span>
+                    </button>
+                </div> <!-- Second Column -->
+            </div>
+        </div>
+      </div>
+      <div class="ListHeader ms-font-xxl ms-fontWeight-light">Todo List</div>
+      <div class="TodoList">
+          <ul class="ms-List">
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-selected is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-secondaryText">Meeting notes</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--flag"></i></div>
+                <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--pinLeft"></i></div>
+                </div>
+            </div>
+         </ul>
+      </div>
+  </body>
+</html>
+```
+ 
+
+Here is a screenshot of what your app should look like at this moment:
+
 ![Second screenshot of ToDo app](http://odux.azurewebsites.net/github/img/tutorials/intro/SecondAppLook.png)
@@ -317,7 +494,10 @@
 
-To accomplish this, let's add the following new styles to app.css:
+**_NOTE_**: Fabric comes with a large assortment of colors that can be referenced on our [Styles Section](http://dev.office.com/fabric/styles#color).
 
+To accomplish this, let's add the following new styles to app.css below our `.TodoBar` block of styles:
+
 ```css
+
 .TodoBar {
-  position: fixed;
+  position: fixed; /* This bar should always be fixed to the top */
   top: 0;
@@ -328,5 +508,7 @@ left: 0;
   z-index: 2;
-  background-color: #0078D7; /* Use a better background-color */
+  background-color: #0078D7; /* New Background Color */
 }
 
+... styles hidden
+
 .ms-TextField .ms-TextField-field {
@@ -344,21 +526,220 @@ margin-top: 14px;
 
-Now let's tweak our list a bit. For our purposes, we really want to just have a title and description with the x and checkmark. Since we don't need the paper clip and flag, let's modify one list item to look like the following:
+**Hang on, this part gets a bit tricky!**
 
+But now we'd really like to tweak our component by adding a title and a description along with icons for an x and a checkmark. Since we don't need the paper clip and flag, go ahead and remove all `<div class="ms-ListItem is-selectable"></div>` elements **except the first one** so we have one element to work with.
+
+Inside of the first `.ms-ListItem` remove the elements` <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--mail"></i></div>`,  `<div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--trash"></i></div>`, and `<span class="ms-ListItem-secondaryText">Meeting notes</span>`. Then change the icons to the x and the check: replace `ms-Icon ms-Icon--flag` with `ms-Icon ms-Icon--x` and `ms-Icon ms-Icon--pinLeft` with `ms-Icon ms-Icon--check`. Our new list HTML should look like the following:
+
 ```html
-<li class="ms-List-item">
-  <div class="ms-ListItem is-unread">
-    <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-    <span class="ms-ListItem-metaText">2:42p</span>
-    <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
-    <div class="ms-ListItem-actions">
-      <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
-      <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+   <div class="TodoList">
+        <ul class="ms-List">
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+        </ul>
     </div>
-  </div>
-</li>
 ```
 
-Now let's copy this new list item code and paste it at least 10 times inside of `<ul class=”ms-List”></ul>`, making sure to remove the old list item code.
+Now let's copy this new list item code and paste it at least 10 times inside of `<ul class="ms-List"></ul>` to fill out the UI of the app. With this final step, you just completed the tutorial! Below is the complete HTML and CSS:
 
+### Final HTML
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+      <link href="css/fabric.css" type="text/css" rel="stylesheet" />
+      <link href="css/fabric.components.css" type="text/css" rel="stylesheet" />
+      <link href="css/app.css" type="text/css" rel="stylesheet" />
+  </head>
+
+  <body>
+      <div class="TodoBar">
+        <div class="ms-Grid">
+            <div class="ms-Grid-row">
+                <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
+                    <div class="ms-TextField">
+                        <input class="ms-TextField-field">
+                        <span class="ms-TextField-description">This should be your first and last name.</span>
+                    </div>
+                </div> <!-- First Column -->
+                <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
+                    <button class="ms-Button">
+                        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
+                        <span class="ms-Button-label">Add ToDo</span>
+                        <span class="ms-Button-description">Description of the action this button takes</span>
+                    </button>
+                </div> <!-- Second Column -->
+            </div>
+        </div>
+      </div>
+      <div class="ListHeader ms-font-xxl ms-fontWeight-light">Todo List</div>
+      <div class="TodoList">
+        <ul class="ms-List">
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            <div class="ms-ListItem is-unread is-selectable">
+                <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+                <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+                <span class="ms-ListItem-metaText">2:42p</span>
+                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
+                <div class="ms-ListItem-actions">
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--x"></i></div>
+                   <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--check"></i></div>
+                </div>
+            </div>
+            
+         </ul>
+      </div>
+  </body>
+</html>
+```
+
+```css
+html, 
+body {
+  margin: 0;
+}
+
+.TodoBar {
+  position: fixed; /* This bar should always be fixed to the top */
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  z-index: 2;
+  background-color: #0078D7;
+}
+
+.TodoList {
+  width: 100%;
+  height: auto;
+  z-index: 1;
+  min-height: 200px;
+}
+
+.ListHeader {
+  width: 100%;
+  height: auto;
+  margin-top: 60px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+}
+
+.ms-TextField .ms-TextField-field {
+  margin-top: 14px;
+}
+
+.ms-Button {
+  margin-top: 14px;
+  width: 100%;
+}
+```
+
+
 Your app should look exactly like this:
@@ -368,2 +749,2 @@
 
-Check out the next part in the series, where we will integrate functionality, animations, and more awesomeness.
+Check out the next part in the series, where we will integrate functionality, animations, and more awesomeness.

gulpfile.js

 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 var gulp = require('gulp');
-var requireDir = require('require-dir');
+var Plugins = require('./gulp/modules/Plugins');
+var Config = require('./gulp/modules/Config');
+var ConsoleHelper = require('./gulp/modules/ConsoleHelper');
+var Server = require('./gulp/modules/Server');
+var Utilites = require('./gulp/modules/Utilities');
+var ErrorHandling = require('./gulp/modules/ErrorHandling');
 
+var watchTasks = [
+    'Fabric', 
+    'FabricComponents', 
+    'ComponentSamples', 
+    'Samples',
+    'FabricDemoPage'
+];
+
 //////////////////////////
@@ -9,5 +22,104 @@ // INCLUDE FABRIC TASKS
 
-requireDir('./gulp');
+Plugins.requireDir('../../gulp');
 
+//
+// Local Server Configuration and Testing Website
+// ----------------------------------------------------------------------------
+
+Server.configServer(
+   Config.port, // Port Number
+   Config.projectURL, // URL To access the server
+   Config.projectDirectory // Directory to serve up
+);
+
+// Config Paths
+Server.serveSpecificPaths(Config.servePaths);
+
+gulp.task('FabricServer', function() {
+    return Server.start();
+});
+
+//
+// Nuke Tasks
+// ---------------------------------------------------------------------------
+gulp.task('nuke', ['Fabric-nuke', 'FabricComponents-nuke', 'ComponentSamples-nuke', 'Samples-nuke']);
+
+//
+// Watch Tasks
+// ----------------------------------------------------------------------------
+
+// Watch and build Fabric when sources change.
+gulp.task('watch', ['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
+    gulp.watch(Config.paths.srcPath + '/**/*', Plugins.batch(function (events, done) {
+        Plugins.runSequence(['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
+    }));
+});
+
+// Watch and build Fabric when sources change.
+gulp.task('watch-sass', ['SassMode', 'Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
+    gulp.watch(Config.paths.srcPath + '/**/*', Plugins.batch(function (events, done) {
+        Plugins.runSequence(['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
+    }));
+});
+
+
+// Watch and build Fabric when sources change.
+gulp.task('watch-sass-debug', ['debugMode', 'SassMode', 'Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
+    gulp.watch(Config.paths.srcPath + '/**/*', Plugins.batch(function (events, done) {
+        Plugins.runSequence(['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
+    }));
+});
+
+// Watch and build Fabric when sources change.
+gulp.task('watch-debug', ['debugMode', 'Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-server'], function () {
+    gulp.watch(Config.paths.srcPath + '/**/*', Plugins.batch(function (events, done) {
+        Plugins.runSequence(['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'FabricServer', 'All-updated'], done);
+    }));
+});
+
+gulp.task('SassMode', function() {
+    return Config.buildSass = true;
+});
+
+gulp.task('debugMode', function() {
+    return Config.debugMode = true;
+});
+
+//
+// Default Build
+// ----------------------------------------------------------------------------
+
+gulp.task('build', ['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'All-finished']);
+gulp.task('re-build', ['Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricServer', 'FabricDemoPage', 'All-updated']);
+
+gulp.task('build-sass', ['SassMode', 'Fabric', 'FabricComponents', 'ComponentSamples', 'Samples', 'FabricDemoPage', 'All-finished']);
+
 gulp.task('default', ['build']);
 
+//
+// Fabric Messages
+// ----------------------------------------------------------------------------
+
+gulp.task('All-finished', watchTasks, function () {
+    console.log(ConsoleHelper.generateSuccess('All Fabric built successfully, you may now celebrate and dance!', true));
+});
+
+gulp.task('All-server', watchTasks, function () {
+    console.log(ConsoleHelper.generateSuccess('Fabric built successfully! ' + "\r\n" + 'Fabric samples located at ' + Config.projectURL + ':' + Config.port, false));
+});
+
+gulp.task('All-updated', watchTasks, function () {
+    console.log(ConsoleHelper.generateSuccess('UPDATE COMPLETE: All Fabric parts updated successfully! Yay!', false));
+});
+
+
+//
+// Packaging tasks
+// ----------------------------------------------------------------------------
+gulp.task('nuget-pack', function(callback) {
+    Plugins.nugetpack(Config.nugetConfig, Config.nugetPaths, callback);
+});
+
+
+
+

package.json

 {
   "name": "office-ui-fabric",
   "author": "Office UI Fabric Team",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "The front-end framework for building experiences for Office 365.",
   "license": "MIT",
+  "scripts": {
+    "test": "gulp"
+  },
   "repository": {
@@ -20,5 +23,8 @@ "type": "git",
     "gulp": "^3.9.0",
+    "gulp-apply-template": "0.0.2",
     "gulp-autoprefixer": "^2.3.1",
     "gulp-batch": "^1.0.5",
+    "gulp-changed": "^1.3.0",
     "gulp-concat": "^2.5.2",
+    "gulp-connect": "^2.2.0",
     "gulp-css-flipper": "^1.0.2",
@@ -28,10 +34,16 @@ "gulp-cssbeautify": "^0.1.3",
     "gulp-data": "^1.2.0",
+    "gulp-debug": "^2.1.2",
     "gulp-file": "^0.2.0",
     "gulp-folders": "^1.1.0",
+    "gulp-foreach": "^0.1.0",
     "gulp-header": "^1.2.2",
+    "gulp-if": "^2.0.0",
     "gulp-less": "^3.0.3",
+    "gulp-less-to-scss": "0.0.4",
     "gulp-minify-css": "^1.2.0",
+    "gulp-nuget-pack": "0.0.6",
     "gulp-plumber": "0.6.6",
     "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.2",
+    "gulp-replace": "^0.5.4",
+    "gulp-sass": "2.1.1",
     "gulp-size": "^1.0.0",
@@ -47,6 +59,9 @@ "gulp-tap": "^0.1.3",
     "merge-stream": "^1.0.0",
+    "node-sass-import-once": "^1.2.0",
     "pretty-hrtime": "0.2.2",
     "require-dir": "^0.3.0",
-    "run-sequence": "^1.1.0"
+    "run-sequence": "^1.1.0",
+    "swig": "^1.4.2",
+    "through2": "^2.0.0"
   }
 }

README.md

@@ -1,83 +0,40 @@
-![Office UI Fabric](http://odux.azurewebsites.net/github/img/OfficeUIFabricLogoBluePadSm-01.png)
+#[Office UI Fabric](http://dev.office.com/fabric)
 
 #####The front-end framework for building experiences for Office and Office 365.
 
-Fabric is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It’s easy to get up and running with Fabric—whether you’re creating a new Office experience from scratch or adding new features to an existing one.
+Fabric is a responsive, mobile-first, collection of styles and tools designed to make it quick and simple for you to create web experiences using the Office Design Language.
 
 ##Contents
 
-- [Why Office UI Fabric?](#why-office-ui-fabric)
-- [Why open source?](#why-open-source)
-- [Support](#support)
-- [Frequently asked questions](#frequently-asked-questions)
-- [Documentation](#documentation)
-- [Changelog](#changelog)
+- [Get started](#get-started)
+- [Learn more](#learn-more)
+- [Contribute to Fabric](#contribute-to-fabric)
+- [Licenses](#licenses)
+- [Change log](#change-log)
 
 
-##Why Office UI Fabric?
-- Fabric embodies the Microsoft Design Language. You get to use the same design language used in Microsoft products, so your experiences feel tightly integrated into Office.  
-- Fabric is just like other popular frameworks so it's easy to use. CSS classes, HTML, and JavaScript samples - everything you need to get going building great looking experiences.
-- Fabric is built from the ground up for Office so there is no excessive overriding of pre-existing frameworks.
-- Fabric integrates with other frameworks like Bootstrap. Uniquely namespaced classes prevent conflicts.
-- Fabric is built with **LESS** for powerful customization.
-- Full language support (including right-to-left behavior) helps take the guesswork out of localization.
-- Full access to the source code and samples. You can tailor Fabric to your own specific needs. 
+##Get started
+To get started quickly by referencing from a CDN or adding directly to your project, see the [Getting started section](http://dev.office.com/fabric/getting-started) on the [Fabric documentation site](http://dev.office.com/fabric).
 
-##Why open source?
+To build, test, and tweak Fabric locally, see [Building Fabric](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/BUILDING.md).
 
-The Office UI Fabric project is developed and maintained by the **OneDrive and SharePoint Design Studio** in order to...
-- Help the broader development community build add-ins and applications for Office 365.
-- Provide a point of reference for the evolving Office 365 Design Language.
-- Create a community around the Office 365 UI/UX that contributes to better experiences for everyone who builds for Office.
 
-We will do our best to release frequently and keep the community up-to-date with changes to the Design Language, components, and other assets. We also have to evolve quickly. This means that everyone gets the latest designs, but that features and assets can change often. Deprecated features will be marked in our changelog, and will be removed from the next major release following the deprecation announcement.
+##Learn more
 
-##Support
+Visit [Fabric's interactive site](http://dev.office.com/fabric) to explore and learn more about Fabric. Find out about [Fabric's styles](http://dev.office.com/fabric/styles), [components](http://dev.office.com/fabric/components), and get answers to common questions on our [Resources & FAQ page](http://dev.office.com/fabric/resources-and-faq).
 
-If you have any issues, we will do our best to respond but we can't guarantee timely responses. Support is limited.
+For a tutorial that shows you how to build a simple app or Office Add-in with Fabric, see our [Fabric tutorial](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/TUTORIAL.md) or [Use Office UI Fabric with Office Add-ins on MSDN](https://msdn.microsoft.com/EN-US/library/office/mt450443.aspx).
 
-If you have a specific bug, feature request, or question, post it via the [issue tracker](https://github.com/OfficeDev/Office-UI-Fabric/issues). For more info and labels, see our [contributing](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/CONTRIBUTING.md) section.
 
-##Frequently asked questions
+##Contribute to Fabric
 
-#####How does Fabric compare to frameworks like Bootstrap and Foundation?
-Fabric solves many of the same problems that other front-end frameworks do, in a way that is specific to Microsoft. We have our own design language and interaction patterns that all Microsoft apps share. Like other frameworks, Fabric speeds up development by ensuring that your add-ins use standard typography, colors, icons, and more. You don't have to spend time overriding the styles of other frameworks. Fabric also includes components the other frameworks don’t have.
+If you have a specific bug, feature request, or question, post it via the [issue tracker](https://github.com/OfficeDev/Office-UI-Fabric/issues). For more information and labels, see our [contributing](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/CONTRIBUTING.md) section.
 
-#####Can Fabric co-exist with other frameworks or existing styles?
-Yes, Fabric applies styles on an opt-in basis only. It does not style standard HTML elements, like headings and form elements. Namespaced classes prevent conflicts with other frameworks. You can safely add Fabric to an existing add-in or use it alongside another framework of your choice.
 
-#####A feature I'm using is deprecated. When will it be removed?
-Typically, we remove deprecated features from the subsequent major release after we announce the deprecation. For example, you can expect that a feature that is deprecated in version 1.6.0 will no longer be available in version 2.0.
+##Licenses
 
-#####How often do you release Fabric?
-We add new features in minor versions (for example, x.**Y**.z), which we typically release approximately every two weeks. Bug fixes and minor tweaks might be included in patch versions (for example, x.y.**Z**) which we release as necessary. Whenever we put out a new release, be sure to visit the change log for details about what’s new. This might include breaking changes that you should be aware of.
+All files on the Office UI Fabric GitHub repository are subject to the MIT license. Please read the License file at the root of the project. Usage of the fonts referenced on Office UI Fabric files is subject to the terms listed [here](http://aka.ms/fabric-font-license).
 
-#####How is Fabric Licensed?
 
-- All files on the Office UI Fabric GitHub repository are subject to the MIT license. Please read the License file at the root of the project. 
-- Usage of the fonts referenced on Office UI Fabric files is subject to the terms listed [here](http://aka.ms/fabric-font-license) 
-
-##Documentation
-
-- [Getting started](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md)
-	- [Building Fabric](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#building-fabric)
-	- [Add to your project](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#add-to-your-project)
-	- [Starter template](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#starter-template)
-	- [Introductory tutorial](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#starter-template#introductory-tutorial)
-	- [Supported browsers](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/GETTINGSTARTED.md#supported-browsers)
-- [Features](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md)
-	- [Typography](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md#typography)
-	- [Color](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md#color)
-	- [Icons](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md#icons)
-	- [Animations](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md#animations)
-	- [Responsive Grid](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md#responsive-grid)
-	- [Localization](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/FEATURES.md#localization)
-- [Components](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/COMPONENTS.md)
-	- [Inputs](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/COMPONENTS.md#inputs)
-	- [Layout](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/COMPONENTS.md#layout)
-	- [Navigation](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/COMPONENTS.md#navigation)
-	- [Content](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/COMPONENTS.md#content)
-- [Contributing](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/ghdocs/CONTRIBUTING.md)
-
-##Changelog
-- View a complete list of additions, fixes, and changes in the [changelog](https://github.com/OfficeDev/Office-UI-Fabric/blob/master/CHANGELOG.md).
+##Change log
+We use [GitHub Releases](https://github.com/blog/1547-release-your-software) to manage our releases, incuding the changelog between every release. View a complete list of additions, fixes, and changes since 1.0 in the [Releases section](https://github.com/OfficeDev/Office-UI-Fabric/releases).

src/components/Breadcrumb/Breadcrumb.json

@@ -5,3 +5,6 @@ {
   "template": "Breadcrumb.html",
-  "class": "ms-Breadcrumb"
+  "class": "ms-Breadcrumb",
+  "dependencies": [
+    "ContextualMenu"
+  ]
 }

src/components/CommandBar/Jquery.CommandBar.js

@@ -22,9 +22,11 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
         var $Item = $(this);
-        var $rightOffset = ($Item.offset().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.offset().left; // Added padding of 10
+        var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10
         commands.push({ jquery: $Item, rightOffset: $rightOffset});
+        console.log($Item.outerWidth(), index, $commandarea.position().left, $Item.position().left);
       });
+
       return commands;
     }
 
-    var processCommands = function(commands, width) {
+    var processCommands = function(commands, width, overflowwidth) {
         var overFlowCommands = [];
@@ -38,3 +40,3 @@
           if(!$Item.hasClass('ms-CommandBarItem-overflow')) {
-            if(rightOffset > width) {
+            if((rightOffset + overflowwidth) > width) {
               overFlowCommands.push($Item);
@@ -59,3 +61,2 @@ } else {
           // Add overflowed commands to ContextualMenu
-
           for(i = 0; i < overFlowCommands.length; i++) {
@@ -78,3 +79,3 @@ var $Item = $(overFlowCommands[i]);
       var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea');
-      var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem');
+      var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow');
       var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow');
@@ -92,10 +93,10 @@ var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth();
       // Initiate process commands and add commands to overflow on load
-      overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
+      overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
       processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
       // Set Search Behavior
-      if($(window).width() < 640) {
+      if($(window).width() < 640) { 
 
-        $('.ms-CommandBarSearch').click(function() {
-          $(this).addClass('is-active');
+        $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+          $(this).closest('.ms-CommandBarSearch').addClass('is-active');
         });
@@ -108,22 +109,36 @@
         var overFlowCommands;
-        overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth());
-        processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
 
         if($(window).width() < 640 && mobileSwitch == false) {
+
+          console.log("Switching to mobile");
+
+          // Go through process and save commands
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+         
           mobileSwitch = true;
 
           // Search Behavior
-          $('.ms-CommandBarSearch').unbind();
-          $('.ms-CommandBarSearch').click(function() {
-            $(this).addClass('is-active');
+          $('.ms-CommandBarSearch-iconSearchWrapper').unbind();
+          $('.ms-CommandBarSearch-iconSearchWrapper').click(function() {
+            $(this).closest('.ms-CommandBarSearch').addClass('is-active');
           });
 
         } else if($(window).width() > 639 && mobileSwitch == true) {
+
+          console.log("Switching to Desktop");
+
+          // Go through process and save commands
           allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea);
+
           mobileSwitch = false;
-
           $('.ms-CommandBarSearch').unbind();
-        }
 
+        } 
+
+        console.log(allCommands, $CommandMainArea.innerWidth());
+
+        // Initiate process commands and add commands to overflow on load
+        overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth);
+        processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu);
+      
       });
@@ -136,2 +151,6 @@
 
+      $OverflowCommand.focusout(function() {
+        $OverflowMenu.removeClass('is-open');
+      });
+
       $SearchBox.find('.ms-CommandBarSearch-input').click(function() {
@@ -141,2 +160,6 @@ $(this).closest('.ms-CommandBarSearch').addClass('is-active');
 
+      $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() {
+        $(this).closest('.ms-CommandBarSearch').addClass('is-active');
+      });
+
        // When clicking the x clear the SearchBox and put state back to normal
@@ -143,0 +166,0 @@ $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() {

src/components/DatePicker/Jquery.DatePicker.js

@@ -6,164 +6,85 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
   /**
-   * @param {object} options DatePicker options
-   * @param {array} options.optionMonths An array of month abbreviations for the options grid
-   * @param {string} options.label A label for the DatePicker
-   * @param {string} options.placeholderText Placeholder text for the DatePicker textfield
+   * DatePicker Plugin
    */
+
   $.fn.DatePicker = function (options) {
 
-    var datePicker;
-    var self = this;
-    var optionMonths = options && options.optionMonths || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    var label = options && options.label || "Start Date";
-    var placeholderText = options && options.placeholderText || "Select a date";
+    return this.each(function () {
 
-    /** check if the PickaDate plugin exists, if not load the plugin */
-    if (!$().pickadate) {
-      var firstScript = document.getElementsByTagName("script")[0];
-      var script = document.createElement("script");
-      script.onload = returnDatePicker;
-      script.src = "PickaDate.js";
-      firstScript.parentNode.insertBefore(script, firstScript);
-    } else {
-      datePicker = returnDatePicker();
-    }
+      /** Set up variables and run the Pickadate plugin. */
+      var $datePicker = $(this);
+      var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({
+        // Strings and translations.
+        weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
 
-    function returnDatePicker() {
-      /** Iterate through each date picker provided. */
-      return self.each(function () {
+        // Don't render the buttons
+        today: '',
+        clear: '',
+        close: '',
 
-        var $datePicker = $(this);
+        // Events
+        onStart: function() {
+          initCustomView($datePicker);
+        },
 
-        /**create the body of the datepicker */
-        appendElements($datePicker, optionMonths);
+        // Classes
+        klass: {
 
-        /** insert label and placeholder text */
-        $datePicker.find('.ms-Label').text(label);
-        $datePicker.find('.ms-TextField-field').attr("placeholder", placeholderText + "...");
+          // The element states
+          input: 'ms-DatePicker-input',
+          active: 'ms-DatePicker-input--active',
 
-        /** Set up variables and run the Pickadate plugin. */
-        var $dateField = $datePicker.find('.ms-TextField-field').pickadate({
-          // Strings and translations.
-          weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+          // The root picker and states
+          picker: 'ms-DatePicker-picker',
+          opened: 'ms-DatePicker-picker--opened',
+          focused: 'ms-DatePicker-picker--focused',
 
-          // Don't render the buttons
-          today: '',
-          clear: '',
-          close: '',
+          // The picker holder
+          holder: 'ms-DatePicker-holder',
 
-          // Events
-          onStart: function() {
-            initCustomView($datePicker);
-          },
+          // The picker frame, wrapper, and box
+          frame: 'ms-DatePicker-frame',
+          wrap: 'ms-DatePicker-wrap',
+          box: 'ms-DatePicker-dayPicker',
 
-          // Classes
-          klass: {
+          // The picker header
+          header: 'ms-DatePicker-header',
 
-            // The element states
-            input: 'ms-DatePicker-input',
-            active: 'ms-DatePicker-input--active',
+          // Month & year labels
+          month: 'ms-DatePicker-month',
+          year: 'ms-DatePicker-year',
 
-            // The root picker and states
-            picker: 'ms-DatePicker-picker',
-            opened: 'ms-DatePicker-picker--opened',
-            focused: 'ms-DatePicker-picker--focused',
+          // Table of dates
+          table: 'ms-DatePicker-table',
 
-            // The picker holder
-            holder: 'ms-DatePicker-holder',
+          // Weekday labels
+          weekdays: 'ms-DatePicker-weekday',
 
-            // The picker frame, wrapper, and box
-            frame: 'ms-DatePicker-frame',
-            wrap: 'ms-DatePicker-wrap',
-            box: 'ms-DatePicker-dayPicker',
+          // Day states
+          day: 'ms-DatePicker-day',
+          disabled: 'ms-DatePicker-day--disabled',
+          selected: 'ms-DatePicker-day--selected',
+          highlighted: 'ms-DatePicker-day--highlighted',
+          now: 'ms-DatePicker-day--today',
+          infocus: 'ms-DatePicker-day--infocus',
+          outfocus: 'ms-DatePicker-day--outfocus',
 
-            // The picker header
-            header: 'ms-DatePicker-header',
+        }
+      },options||{}));
+      var $picker = $dateField.pickadate('picker');
 
-            // Month & year labels
-            month: 'ms-DatePicker-month',
-            year: 'ms-DatePicker-year',
-
-            // Table of dates
-            table: 'ms-DatePicker-table',
-
-            // Weekday labels
-            weekdays: 'ms-DatePicker-weekday',
-
-            // Day states
-            day: 'ms-DatePicker-day',
-            disabled: 'ms-DatePicker-day--disabled',
-            selected: 'ms-DatePicker-day--selected',
-            now: 'ms-DatePicker-day--today',
-            infocus: 'ms-DatePicker-day--infocus',
-            outfocus: 'ms-DatePicker-day--outfocus'
-          }
-        });
-        var $picker = $dateField.pickadate('picker');
-
-        /** Respond to built-in picker events. */
-        $picker.on({
-          render: function() {
-            updateCustomView($datePicker);
-          },
-          open: function() {
-            scrollUp($datePicker);
-          }
-        });
-
+      /** Respond to built-in picker events. */
+      $picker.on({
+        render: function() {
+          updateCustomView($datePicker);
+        },
+        open: function() {
+          scrollUp($datePicker);
+        }
       });
-    }
 
-    return datePicker;
+    });
   };
 
   /**
-   * Create the body of the DatePicker plugin and
-   * append it to the date picker element
-   * @param {object} $datePicker JQuery object
-   * @param {array} optionMonths
-   */
-  function appendElements($datePicker, optionMonths) {
-    var elements = '<div class="ms-TextField">';
-    elements += '<label class="ms-Label"></label>';
-    elements += '<i class="ms-DatePicker-event ms-Icon ms-Icon--event"></i>';
-    elements += '<input class="ms-TextField-field" type="text">';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-monthComponents">';
-    elements += '<span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '<div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>';
-    elements += '</div>';
-    elements += '<span class="ms-DatePicker-goToday js-goToday">Go to today</span>';
-    elements += '<div class="ms-DatePicker-monthPicker">';
-    elements += '<div class="ms-DatePicker-header">';
-    elements += '<div class="ms-DatePicker-yearComponents">';
-    elements += '<span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-currentYear js-showYearPicker"></div>';
-    elements += '</div>';
-    elements += '<div class="ms-DatePicker-optionGrid">';
-    elements += '</div></div>';
-    elements += '<div class="ms-DatePicker-yearPicker">';
-    elements += '<div class="ms-DatePicker-decadeComponents">';
-    elements += '<span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--chevronRight"></i></span>';
-    elements += '<span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>';
-    elements += '</div></div>';
-    $datePicker.append(elements);
-    $datePicker.find('.ms-DatePicker-optionGrid').append(createMonthOptions(optionMonths));
-  }
-  /**
-   * creates month elements for the month grid
-   * @param {array} optionMonths
-   * @returns {string}
-   */
-  function createMonthOptions(optionMonths) {
-    var i = 0;
-    var content = "";
-    for(i; i < 12; i++) {
-      content += '<span class="ms-DatePicker-monthOption js-changeDate" data-month="' + i + '">' + optionMonths[i] + '</span>';
-    }
-    return content;
-  }
-  /**
    * After the Pickadate plugin starts, this function
@@ -320,4 +241,6 @@ * adds additional controls to the picker view.
 
+
   /** Whenever the picker renders, do our own rendering on the custom controls. */
   function updateCustomView($datePicker) {
+
     /** Get some variables ready. */
@@ -347,3 +270,3 @@ var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker');
     output += '<div class="ms-DatePicker-optionGrid">';
-    for (year = startingYear; year < (startingYear + 12); year++) {
+    for (var year = startingYear; year < (startingYear + 12); year++) {
       output += '<span class="ms-DatePicker-yearOption js-changeDate" data-year="' + year + '">' + year +'</span>';
@@ -360,3 +283,3 @@ }
   }
-
+  
   /** Scroll the page up so that the field the date picker is attached to is at the top. */
@@ -369,2 +292,2 @@ function scrollUp($datePicker) {
 
-})(jQuery);
+})(jQuery);

src/components/Dropdown/Jquery.Dropdown.js

@@ -58,2 +58,7 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
                     $dropdownWrapper.toggleClass('is-open');
+                    $('.ms-Dropdown').each(function(){
+                        if ($(this)[0] !== $dropdownWrapper[0]) {
+                            $(this).removeClass('is-open');
+                        }
+                    });
 
@@ -60,0 +65,0 @@ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */

src/components/NavBar/Jquery.NavBar.js

@@ -29,2 +29,3 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
       $navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) {
+        var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');
         event.stopPropagation();
@@ -41,3 +42,3 @@
         // Close and blur the search box if it doesn't have text.
-        if ($navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field').val().length === 0) {
+        if ($searchBox.length > 0 && $searchBox.val().length === 0) {
           $('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
@@ -83,6 +84,7 @@ }
       $(document).on('click', 'html', function(event) {
+		var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field');  
         $navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open');
 
         // Close and blur the search box if it doesn't have text.
-        if ($navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field').val().length === 0) {
+        if ($searchBox.length > 0 && $searchBox.val().length === 0) {
           $navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur();
@@ -89,0 +91,0 @@ }

src/components/Panel/Jquery.Panel.js

@@ -14,2 +14,12 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
+    var pfx = ["webkit", "moz", "MS", "o", ""];
+
+    // Prefix function
+    function prefixedEvent(element, type, callback) {
+      for (var p = 0; p < pfx.length; p++) {
+        if (!pfx[p]) type = type.toLowerCase();
+        element.addEventListener(pfx[p]+type, callback, false);
+      }
+    }
+
     /** Go through each panel we've been given. */
@@ -22,12 +32,28 @@ return this.each(function () {
       /** Hook to open the panel. */
-      $(".js-togglePanel").on("click", function() {
-        // Panel must be set to display "block" in order for animations to render
-        $panelMain.css({display: "block"});
-        $panel.toggleClass("is-open");
+      $(".ms-PanelAction-close").on("click", function() {
+
+        // Display Panel first, to allow animations
+        $panel.addClass("ms-Panel-animateOut");
+
       });
 
-      $panelMain.on("animationend webkitAnimationEnd MSAnimationEnd", function(event) {
-        if (event.originalEvent.animationName === "fadeOut") {
+      $(".ms-PanelAction-open").on("click", function() {
+
+        // Display Panel first, to allow animations
+        $panel.addClass("is-open");
+
+        // Add animation class
+        $panel.addClass("ms-Panel-animateIn");
+
+      });
+
+      prefixedEvent($panelMain[0], 'AnimationEnd', function(event) {
+        if (event.animationName.indexOf('Out') > -1) {
+
           // Hide and Prevent ms-Panel-main from being interactive
-          $(this).css({display: "none"});
+          $panel.removeClass('is-open');
+
+          // Remove animating classes for the next time we open panel
+          $panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut');
+
         }
@@ -34,0 +60,0 @@ });

src/components/PersonaCard/Jquery.PersonaCard.js

@@ -27,4 +27,3 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
         /** Function for switching selected item into view by adding a class to ul. */
-        var updateForItem = function(item){
-          var wrapper = document.getElementById("detailList");
+        var updateForItem = function(wrapper, item){
           var previousItem = wrapper.className + "";
@@ -42,3 +41,3 @@ var detail = item.charAt(0).toUpperCase() + item.slice(1);
         /** Add detail class to ul to switch it into view. */
-        updateForItem(el);
+        updateForItem($(this).parent().next().find('#detailList')[0], el);
 
@@ -45,0 +44,0 @@ /** Display the corresponding details. */

src/components/ProgressIndicator/ProgressIndicator.json

 {
-  "name": "OperationMonitor",
+  "name": "ProgressIndicator",
   "notes": "A component for outputting determinate progress",
@@ -4,0 +4,0 @@ "template": "ProgressIndicator.html",

src/components/SearchBox/Jquery.SearchBox.js

@@ -18,5 +18,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
       var cancel = false;
+      var $searchField = $(this).find('.ms-SearchBox-field');
 
       /** SearchBox focus - hide label and show cancel button */
-      $(this).find('.ms-SearchBox-field').on('focus', function() {
+      $searchField.on('focus', function() {
         /** Hide the label on focus. */
@@ -28,3 +29,11 @@ $(this).siblings('.ms-SearchBox-label').hide();
 
+      /** 'hovering' class allows for more fine grained control of hover state */
+      $searchField.on('mouseover', function() {
+        $searchField.addClass('hovering')
+      });
 
+      $searchField.on('mouseout', function() {
+        $searchField.removeClass('hovering');
+      });
+
       // If cancel button is selected, change cancel value to true
@@ -39,10 +48,14 @@ $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() {
         // If cancel button is selected remove the text and show the label
-        if ( cancel == true ) {
+        if (cancel) {
           $(this).val('');
-          $(this).siblings('.ms-SearchBox-label').show();
+          $searchField.addClass('hovering');
         }
-
-        // Remove is-active class - hides cancel button
-        $(this).parent('.ms-SearchBox').removeClass('is-active');
-
+        
+        var $searchBox = $(this).parent('.ms-SearchBox');
+        // Prevents inputfield from gaining focus too soon
+        setTimeout(function() {
+          // Remove is-active class - hides cancel button
+          $searchBox.removeClass('is-active');
+        }, 10);
+        
         /** Only do this if no text was entered. */
@@ -56,4 +69,2 @@ if ($(this).val().length === 0 ) {
       });
-
-
     });
@@ -60,0 +71,0 @@

src/components/Spinner/Spinner.js

@@ -17,13 +17,10 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
  * @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
- * @param {string} type - The type of spinner. Set this property to "sixteen" for sixteen dot version. The default is eight.
  */
 
-fabric.Spinner = function(target, spinnerType) {
+fabric.Spinner = function(target) {
 
     var _target = target;
-    var _spinnerType = spinnerType || "eight";
-    var eightSize = 0.18;
-    var sixteenSize = 0.1;
+    var eightSize = 0.179;
     var circleObjects = [];
-    var animationSpeed = 100;
+    var animationSpeed = 90;
     var interval;
@@ -33,2 +30,3 @@ var spinner;
     var offsetSize;
+    var fadeIncrement = 0;
 
@@ -59,9 +57,4 @@ /**
     function _init() {
-        if(_spinnerType === "sixteen") {
-            offsetSize = sixteenSize;
-            numCircles = 16;
-        } else {
-            offsetSize = eightSize;
-            numCircles = 8;
-        }
+        offsetSize = eightSize;
+        numCircles = 8;
         _createCirclesAndArrange();
@@ -73,8 +66,11 @@ _initializeOpacities();
     function _initializeOpacities() {
-        var i = numCircles, j;
-        while(i--) {
-            j = circleObjects.length;
-            while(j--) {
-                _fade(circleObjects[j]);
-            }
+        var i = 0;
+        var j = 1;
+        var opacity;
+        fadeIncrement = 1 / numCircles;
+
+        for (i; i < numCircles; i++) {
+            var circleObject = circleObjects[i];
+            opacity = (fadeIncrement * j++);
+            _setOpacity(circleObject.element, opacity);
         }
@@ -84,15 +80,9 @@ }
     function _fade(circleObject) {
-        var opacity;
-        if(circleObject.j < numCircles) {
-            if(Math.floor(circleObject.j / (numCircles / 2))) {
-                opacity = _getOpacity(circleObject.element) - 2 / numCircles;
-            } else{
-                opacity = _getOpacity(circleObject.element) + 2 / numCircles;
-            }
-        } else {
-            circleObject.j = 0;
-            opacity = 2/ numCircles;
+        var opacity = _getOpacity(circleObject.element) - fadeIncrement;
+
+        if (opacity <= 0) {
+            opacity = 1;
         }
+
         _setOpacity(circleObject.element, opacity);
-        circleObject.j++;
     }
@@ -118,3 +108,3 @@
         //for backwards compatibility
-        if (_target.className !== "ms-Spinner") {
+        if (_target.className.indexOf("ms-Spinner") === -1) {
             spinner = document.createElement("div");
@@ -126,3 +116,3 @@ spinner.className = "ms-Spinner";
         }
-        
+
         var width = spinner.clientWidth;
@@ -136,3 +126,4 @@ var height = spinner.clientHeight;
         var radius = (width- offset) * 0.5;
-        while(i--) {
+
+        while (i--) {
             var circle = _createCircle();
@@ -139,0 +130,0 @@ var x = Math.round(width * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;

src/components/Spinner/Spinner.json

@@ -5,3 +5,28 @@ {
   "template": "Spinner.html",
-  "class": "ms-Spinner"
+  "class": "ms-Spinner",
+  "wrapBranches": true,
+  "fileOrder": [
+    "Spinner.html",
+    "Spinner.Large.html",
+    "Spinner.Message.html",
+    "Spinner.Message.Large.html"
+  ],
+  "branches": [
+    {
+      "name": "Standard",
+      "default": true
+    },
+    {
+      "name": "Large",
+      "class": "ms-Spinner--large"
+    },
+    {
+      "name": "Standard with message ",
+      "class": "ms-Spinner"
+    },
+    {
+      "name": "Large with message",
+      "class": "ms-Spinner--large"
+    }
+  ]
 }

Third Party Notices.txt

@@ -22,2 +22,2 @@ This project incorporates material from the projects listed below (Third Party IP). The original copyright notice and the license under which Microsoft received such Third Party IP, are set forth below. Such licenses and notices are provided for informational purposes only. Microsoft licenses the Third Party IP to you under the licensing terms for the Microsoft product. Microsoft reserves all other rights not expressly granted under this agreement, whether by implication, estoppel or otherwise.
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of package files

701

increased by15.11%

Lines of code

53777

increased by13.83%

Worsened metrics

Total package byte prevSize

4185964

decreased by-23.08%

Dev dependency count

47

increased by34.29%

Number of lines in readme file

41

decreased by-51.19%

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes