├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .vscode ├── settings.json └── spell.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets └── ngOfficeUiFabric.png ├── build ├── build.d.ts ├── config │ ├── build.ts │ ├── karma.ts │ └── webpack.ts ├── global.d.ts ├── gulp │ ├── BaseGulpTask.ts │ ├── gulp.d.ts │ ├── tasks │ │ ├── build-lib.ts │ │ ├── clean-build.ts │ │ ├── clean-lib.ts │ │ ├── clean.ts │ │ ├── live-dev.ts │ │ ├── test.ts │ │ ├── transpile-ts.ts │ │ ├── validate-build.ts │ │ ├── vet-build-ts.ts │ │ ├── vet-lib-js.ts │ │ ├── vet-lib-ts.ts │ │ └── vet.ts │ └── utils.ts └── scripts │ ├── ScriptUtils.ts │ ├── build-library.sh │ ├── check-pr.sh │ ├── release.sh │ ├── tag-release.sh │ ├── update-nuget-repo.sh │ ├── update-nuget-versions.ts │ ├── update-package-repo.sh │ ├── update-package-versions.ts │ └── utils.inc ├── circle.yml ├── docs └── guides │ ├── CODING.md │ ├── CONTRIB-WORKFLOW.md │ ├── DIRECTIVE-CHECKLIST.md │ ├── FAQ.md │ ├── GULP-TASKS.md │ ├── MERGE-REQUESTS.md │ ├── MILESTONES.md │ ├── MPA.md │ ├── PULL-REQUESTS.md │ ├── REPOS.md │ ├── SETUP-DEV-MACHINE.md │ ├── SLACK.md │ └── TESTING.md ├── gulpfile.ts ├── package-lock.json ├── package.json ├── src ├── components │ ├── breadcrumb │ │ ├── .gitignore │ │ ├── breadcrumbDirective.spec.ts │ │ ├── breadcrumbDirective.ts │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ └── demoBasicUsage │ │ │ └── index.html │ ├── button │ │ ├── .gitignore │ │ ├── buttonDirective.spec.ts │ │ ├── buttonDirective.ts │ │ ├── buttonTemplateType.ts │ │ ├── buttonTypeEnum.ts │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoActionButton │ │ │ └── index.html │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── demoCommandButton │ │ │ └── index.html │ │ ├── demoCompoundButton │ │ │ └── index.html │ │ ├── demoDisabled │ │ │ └── index.html │ │ ├── demoHeroButton │ │ │ └── index.html │ │ └── demoPrimaryButton │ │ │ └── index.html │ ├── callout │ │ ├── .gitignore │ │ ├── calloutArrowEnum.ts │ │ ├── calloutDirective.spec.ts │ │ ├── calloutDirective.ts │ │ ├── calloutTypeEnum.ts │ │ └── demo │ │ │ ├── index.html │ │ │ └── index.js │ ├── choicefield │ │ ├── .gitignore │ │ ├── choicefieldDirective.spec.ts │ │ ├── choicefieldDirective.ts │ │ ├── choicefieldTypeEnum.ts │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── demoDisabled │ │ │ └── index.html │ │ └── dirtyDemo │ │ │ └── index.html │ ├── commandbar │ │ ├── .gitignore │ │ ├── commandBarDirective.spec.ts │ │ ├── commandBarDirective.ts │ │ └── demo │ │ │ ├── index.html │ │ │ └── index.js │ ├── content │ │ ├── .gitignore │ │ ├── contentDirective.spec.ts │ │ ├── contentDirective.ts │ │ ├── demo │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── styles.css │ │ └── demoBasicUsage │ │ │ └── index.html │ ├── contextualmenu │ │ ├── .gitignore │ │ ├── contextualMenu.spec.ts │ │ ├── contextualMenu.ts │ │ ├── demo │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── styles.css │ │ └── demoBasicUsage │ │ │ ├── index.html │ │ │ └── scripts.js │ ├── datepicker │ │ ├── .gitignore │ │ ├── datepickerDirective.spec.ts │ │ ├── datepickerDirective.ts │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ └── dirtyDemo │ │ │ └── index.html │ ├── dialog │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── dialogDirective.spec.ts │ │ ├── dialogDirective.ts │ │ └── dialogEnums.ts │ ├── dropdown │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── demoDisabled │ │ │ └── index.html │ │ ├── dirtyDemo │ │ │ └── index.html │ │ ├── dropdownDirective.spec.ts │ │ └── dropdownDirective.ts │ ├── facepile │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── Persona.Person2.png │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── people.js │ │ ├── facepileDirective.spec.ts │ │ └── facepileDirective.ts │ ├── icon │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── demoTypeScriptUsage │ │ │ ├── bundle.js │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ └── webpack.config.js │ │ ├── iconDirective.spec.ts │ │ ├── iconDirective.ts │ │ └── iconEnum.ts │ ├── label │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── labelDirective.spec.ts │ │ └── labelDirective.ts │ ├── link │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── linkDirective.spec.ts │ │ └── linkDirective.ts │ ├── list │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── listDirective.spec.ts │ │ ├── listDirective.ts │ │ ├── listItemSelectModeEnum.ts │ │ ├── listItemTypeEnum.ts │ │ └── listLayoutEnum.ts │ ├── messagebanner │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── messageBannerDirective.spec.ts │ │ └── messageBannerDirective.ts │ ├── messagebar │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── messageBarDirective.spec.ts │ │ ├── messageBarDirective.ts │ │ └── messageBarTypeEnum.ts │ ├── navbar │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ ├── mobile.html │ │ │ └── styles.css │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── scripts.js │ │ ├── navbarDirective.spec.ts │ │ └── navbarDirective.ts │ ├── orgchart │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── Persona.Person2.png │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── orgChartDirective.spec.ts │ │ ├── orgChartDirective.ts │ │ ├── orgChartPresenceEnum.ts │ │ ├── orgChartSelectModeEnum.ts │ │ └── orgChartStyleEnum.ts │ ├── overlay │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── overlayDirective.spec.ts │ │ ├── overlayDirective.ts │ │ └── overlayModeEnum.ts │ ├── panel │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── panelDirective.spec.ts │ │ ├── panelDirective.ts │ │ └── panelDirectiveEnum.ts │ ├── peoplepicker │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── Persona.Person2.png │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ ├── people.js │ │ │ └── styles.css │ │ ├── peoplePickerDirective.spec.ts │ │ └── peoplePickerDirective.ts │ ├── persona │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── Persona.Person2.png │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── personaDirective.spec.ts │ │ ├── personaDirective.ts │ │ └── sizeEnum.ts │ ├── personacard │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── Persona.Person2.png │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── personacardDirective.spec.ts │ │ ├── personacardDirective.ts │ │ ├── placeholderEnum.ts │ │ └── sizeEnum.ts │ ├── pivot │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── scripts.js │ │ ├── pivotDirective.spec.ts │ │ ├── pivotDirective.ts │ │ ├── pivotSizeEnum.ts │ │ └── pivotTypeEnum.ts │ ├── progressindicator │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── progressIndicatorDirective.spec.ts │ │ └── progressIndicatorDirective.ts │ ├── searchbox │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── dirtyDemo │ │ │ └── index.html │ │ ├── searchboxDirective.spec.ts │ │ └── searchboxDirective.ts │ ├── spinner │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── spinnerDirective.spec.ts │ │ ├── spinnerDirective.ts │ │ └── spinnerSizeEnum.ts │ ├── table │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ └── index.html │ │ ├── demoSortableColumns │ │ │ └── index.html │ │ ├── tableDirective.spec.ts │ │ ├── tableDirective.ts │ │ ├── tableRowSelectModeEnum.ts │ │ └── tableTypeEnum.ts │ ├── textfield │ │ ├── .gitignore │ │ ├── demo │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── demoBasicUsage │ │ │ ├── index.html │ │ │ └── index.ts │ │ ├── demoMultiline │ │ │ └── index.html │ │ ├── demoPlaceholder │ │ │ └── index.html │ │ ├── demoUnderlined │ │ │ └── index.html │ │ ├── dirtyDemo │ │ │ └── index.html │ │ ├── textFieldDirective.spec.ts │ │ ├── textFieldDirective.ts │ │ └── uifTypeEnum.ts │ └── toggle │ │ ├── .gitignore │ │ ├── demo │ │ ├── index.html │ │ └── index.js │ │ ├── demoBasicUsage │ │ └── index.html │ │ ├── demoDirty │ │ └── index.html │ │ ├── toggleDirective.spec.ts │ │ └── toggleDirective.ts └── core │ ├── components.ts │ ├── core.ts │ ├── jquery.phantomjs.fix.js │ ├── person.ts │ ├── personaInitialsColorEnum.ts │ ├── personaPresenceEnum.ts │ └── personaStyleEnum.ts ├── tsconfig.json ├── tslint.json ├── wallaby.config.ts └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "parserOptions": { 6 | "sourceType": "script" 7 | }, 8 | "globals": { 9 | "angular": true, 10 | "jQuery": true 11 | }, 12 | "extends": "eslint:recommended", 13 | "rules": { 14 | "indent": [ 15 | "error", 16 | 2 17 | ], 18 | "linebreak-style": [ 19 | "error", 20 | "unix" 21 | ], 22 | "quotes": [ 23 | "error", 24 | "single" 25 | ], 26 | "semi": [ 27 | "error", 28 | "always" 29 | ], 30 | "no-console": "off" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/.github/CONTRIBUTING.md -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Having an issue? Please give us as much information as possible, provide repo steps & ideally a [plunker](https://plnkr.co/), [jsfiddle](https://jsfiddle.net/) or [CodePen](https://codepen.io) that demonstrates the issue. 2 | 3 | Not an issue? Feel free to delete this template & create an issue from scratch. 4 | 5 | ### Expected Behavior 6 | 7 | 8 | ### Actual Behavior 9 | 10 | 11 | ### Steps to Reproduce Behavior 12 | 13 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | When submitting a pull request, make sure you do the following: 2 | 3 | - [ ] submit the PR to the `dev` branch on the main repo, **not** the `master` branch 4 | - [ ] include a brief description what the PR is for in the subject 5 | - [ ] in the body, explain what the PR addresses 6 | - [ ] in the body, reference the issue that it closes by number in the format `Closes #000.` 7 | - [ ] squash multiple commits into one and use good commit messages (https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/CODING.md#commit-messages) 8 | 9 | Please ensure you have followed the guidelines outlined in the docs: https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/PULL-REQUESTS.md 10 | 11 | The branch manager can handle breaking up / squashing commits and updating commit messages if you don't do it, but this will delay your PR from being merged most likely. 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_Store 2 | **/npm-debug.log 3 | 4 | # no need to keep stuff pulled remotely 5 | node_modules 6 | 7 | # don't keep coverage test reports 8 | reports/ 9 | 10 | # no js, just typescript 11 | *.js 12 | *.js.map 13 | 14 | !src/core/jquery.phantomjs.fix.js 15 | 16 | # Visual Studio 17 | /.vs 18 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "tslint.enable": true, 4 | "tslint.configFile": "./tslint.json" 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/spell.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "language": "en", 4 | "ignoreWordsList": [ 5 | "https", 6 | "npm", 7 | "NPM", 8 | "bower", 9 | "nuget", 10 | "NuGet", 11 | "cdnjs", 12 | "CDNJS", 13 | "devDependency", 14 | "minified", 15 | "unminified", 16 | "angular", 17 | "Angular", 18 | "angularjs", 19 | "AngularJS", 20 | "IE9", 21 | "OfficeUiFabric", 22 | "ngOfficeUiFabric", 23 | "ngOfficeUIFabric", 24 | "ngofficeuifabric", 25 | "ng-OfficeUIFabric", 26 | "ng-officeuifabric", 27 | "package-ngofficeuifabric" 28 | ], 29 | "mistakeTypeToStatus": { 30 | "Passive voice": "Warning", 31 | "Spelling": "Error", 32 | "Complex Expression": "Warning", 33 | "Hidden Verbs": "Information", 34 | "Hyphen Required": "Error", 35 | "Redundant Expression": "Information", 36 | "Did you mean...": "Information", 37 | "Repeated Word": "Error", 38 | "Missing apostrophe": "Error", 39 | "Cliches": "Warning", 40 | "Missing Word": "Warning", 41 | "Make I uppercase": "Error" 42 | }, 43 | "languageIDs": [ 44 | "markdown", 45 | "latex", 46 | "plaintext" 47 | ], 48 | "ignoreRegExp": [ 49 | "/`(kb.*?)`/g", 50 | "/(http\\\\S*)/gm", 51 | "/\\\\(.*.png\\\\)/g", 52 | "/\\\\(.*.gif\\\\)/g", 53 | "/\\\\(.*.md\\\\)/g", 54 | "/\\\\(.*.jpg\\\\)/g", 55 | "/^((`{3}\\\\s*)(\\\\w+)?(\\\\s*([\\\\w\\\\W]+?)\\\\n*)\\\\2)\\\\n*(?:[^\\\\S\\\\w\\\\s]|$)/gm" 56 | ] 57 | } 58 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Angular Office UI Fabric 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /assets/ngOfficeUiFabric.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/assets/ngOfficeUiFabric.png -------------------------------------------------------------------------------- /build/build.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Specifies the current node web environment variables. 3 | * 4 | * @typedef nodeEnvironment 5 | * @type {Object} 6 | * @property {number} port - Port where the server should run. 7 | * @property {number} nodeEnv - Setting of 'dev' or 'build' for the node environment. 8 | */ 9 | interface INodeEnvironment { 10 | PORT: number; 11 | NODE_ENV: string; 12 | DEBUG?: string; 13 | } 14 | 15 | /** 16 | * Settings for the node enviroment on startup for nodemon. 17 | * 18 | * @typedef nodeOptions 19 | * @type {Object} 20 | * @property {string} script - Relative path to the script to start the node server. 21 | * @property {number} delayTime - The time nodemon should delay to restart the server. 22 | * @property {nodeEnvironment} env - Specify if the server should be dev / build. 23 | * @property {string[]} watch - What files should be monitored to restart nodemon. 24 | */ 25 | interface INodemonOptions { 26 | script: string; 27 | delayTime: number; 28 | env: INodeEnvironment; 29 | watch: string[]; 30 | nodeArgs?: string[]; 31 | } 32 | -------------------------------------------------------------------------------- /build/config/webpack.ts: -------------------------------------------------------------------------------- 1 | // import * as webpack from 'webpack'; 2 | import { 3 | Configuration, 4 | ExternalsElement, 5 | NewModule, 6 | NewLoaderRule, 7 | NewResolve, 8 | Output 9 | } from 'webpack'; 10 | 11 | /** 12 | * Options affecting the normal module. 13 | * 14 | * @class 15 | * @implements {NewModule} 16 | * @public 17 | * 18 | * @property {NewLoaderRule[]} rules - Array of automatically applied loader rules. 19 | */ 20 | class WebPackModule implements NewModule { 21 | 22 | public rules: NewLoaderRule[] = []; 23 | 24 | /** 25 | * Constructor that creates the collection of loaders. 26 | * 27 | * @constructs 28 | */ 29 | constructor() { 30 | this.rules.push({ 31 | exclude: /node_modules/, 32 | loader: 'ts-loader', 33 | test: /\.ts$/ 34 | }); 35 | } 36 | } 37 | 38 | /** 39 | * Webpack configuration. 40 | * 41 | * @class 42 | * @implements {Configuration} 43 | * @public 44 | * @see {link http://webpack.github.io/docs/configuration.html} 45 | * 46 | * @property {Output} output - Options affecting the output. 47 | * @property {string} libraryTarget - Which format to export the library. 48 | * @property {Object} externals - Dependencies not resolved by webpack, but become dependencies of the resulting bundle. 49 | * @property {string} target - Compile for usage in a browser-like environment. 50 | * @property {Object} NewResolve - Options affecting the resolving of modules. 51 | */ 52 | export class WebPackConfig implements Configuration { 53 | 54 | public output: Output = { 55 | // export to AMD, CommonJS2 or as property in root 56 | libraryTarget: 'umd' 57 | }; 58 | 59 | public externals: ExternalsElement = { 60 | 'angular': 'angular' 61 | }; 62 | 63 | public target: string = 'web'; 64 | 65 | public resolve: NewResolve = { 66 | extensions: ['.ts', '.js'] 67 | }; 68 | 69 | public module: NewModule = new WebPackModule(); 70 | 71 | } 72 | -------------------------------------------------------------------------------- /build/global.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * General purpose interface for callbacks that have no parameters or return types. 3 | * Commonly used in gulp tasks. 4 | * 5 | * @callback VoidCallback 6 | */ 7 | interface IVoidCallback { 8 | (): void; 9 | } 10 | 11 | /** 12 | * General purpose interface for callbacks that have a single string parameter or return types. 13 | * Commonly used in gulp tasks. 14 | * 15 | * @callback IStringCallback 16 | */ 17 | interface IStringCallback { 18 | (message?: string): void; 19 | } 20 | 21 | /** 22 | * Command line arguments. 23 | * 24 | * @typedef commandLineArgs 25 | * @type {Object} 26 | * @property {boolean} debug - Flag if Node process should start in debug mode. 27 | * @property {boolean} dev - Flag indicating if development package should be created (unminified, with comments and sourcemaps) 28 | * @property {boolean} file - Name of the file changed (used in 'gulp test' to filter tests) 29 | * @property {boolean} noExit - Flag indicating if errors should not be emitted and thus terminating process. 30 | * @property {boolean} serve - Flag to auto reload connected browsers when sources for demo changed. 31 | * @property {boolean} specs - Flag indicating if the tests should be written to the console. 32 | * @property {boolean} verbose - Flag if tasks should output verbose messages to console. 33 | * @property {number} version - Version number to use in building library, overriding what's in package.json. 34 | * @property {boolean} watch - 35 | */ 36 | interface ICommandLineArgs { 37 | debug?: boolean; 38 | dev?: boolean; 39 | file?: string; 40 | noExit?: boolean; 41 | serve?: boolean; 42 | specs?: boolean; 43 | verbose?: boolean; 44 | version?: number; 45 | watch?: boolean; 46 | } 47 | -------------------------------------------------------------------------------- /build/gulp/BaseGulpTask.ts: -------------------------------------------------------------------------------- 1 | /** @class */ 2 | export class BaseGulpTask { 3 | 4 | /** 5 | * @property {string} description - Help description for the task. 6 | */ 7 | public static description: string = ''; 8 | 9 | /** 10 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 11 | */ 12 | public static dependencies: string[] = []; 13 | 14 | /** 15 | * @property {string[]} aliases - Different options to run the task. 16 | */ 17 | public static aliases: string[] = []; 18 | 19 | /** 20 | * @property {Object} options - Any command line flags that can be passed to the task. 21 | */ 22 | public static options: any = {}; 23 | 24 | /** 25 | * @property {string} helpMargin - whitespaces for nicely displaying help in the console 26 | */ 27 | public static helpMargin: string = '\r\n '; 28 | 29 | } 30 | -------------------------------------------------------------------------------- /build/gulp/gulp.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Describes a dynamic gulp file contents. 3 | * 4 | * @typedef gulpTaskFile 5 | * @type {Object} 6 | * @property {string} name - Name of the gulp task. 7 | * @property {gulpTask} GulpTask - Actual gulp task. 8 | */ 9 | interface IGulpTaskFile { 10 | name: string; 11 | GulpTask: IGulpTask; 12 | } 13 | 14 | /** 15 | * Describes a gulp task that is dynamically loaded. Implementatin of the task resides within 16 | * the implementation of the the class' constructor. 17 | * 18 | * @typedef gulpTask 19 | * @type {Object} 20 | * @property {string} description - Help description for the task. 21 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 22 | * @property {string[]} aliases - Different options to run the task. 23 | * @property {Object} options - Any command line flags that can be passed to the task. 24 | */ 25 | interface IGulpTask { 26 | description: string; 27 | dependencies: string[]; 28 | aliases: string[]; 29 | options: any; 30 | } 31 | 32 | /** 33 | * Error object coming from gulp 34 | * 35 | * @typedef gulpErrorulp 36 | * @type {Object} 37 | * @property {string} message - Error message. 38 | * @property {boolean} showStack - Flag if the call stack should be shown. 39 | * @property {string} showProperties - Flag if the error properties should be shown. 40 | * @property {string} plugin - Name of the gulp plugin that published the error. 41 | * @property {Object} __saftey - Catch-all 42 | */ 43 | interface IGulpError { 44 | message: string; 45 | showStack: boolean; 46 | showProperties: boolean; 47 | plugin: string; 48 | __saftey: any; 49 | } 50 | -------------------------------------------------------------------------------- /build/gulp/tasks/build-lib.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import { BaseGulpTask } from '../BaseGulpTask'; 3 | import { BuildConfig } from '../../config/build'; 4 | import { Utils } from '../utils'; 5 | import * as gulp from 'gulp'; 6 | import * as yargs from 'yargs'; 7 | import * as webpack from 'webpack'; 8 | import * as webpackConfig from '../../config/webpack'; 9 | let webpackStream: any = require('webpack-stream'); 10 | 11 | /** 12 | * Builds files to be distributed as a library release. 13 | * 14 | * @class 15 | */ 16 | export class GulpTask extends BaseGulpTask { 17 | 18 | /** 19 | * @property {string} description - Help description for the task. 20 | */ 21 | public static description: string = 'Builds ngOfficeUiFabric library files'; 22 | 23 | /** 24 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 25 | */ 26 | public static dependencies: string[] = []; 27 | 28 | /** 29 | * @property {string[]} aliases - Different options to run the task. 30 | */ 31 | public static aliases: string[] = ['b', 'B']; 32 | 33 | /** 34 | * @property {Object} options - Any command line flags that can be passed to the task. 35 | */ 36 | public static options: any = { 37 | 'dev' : 'Create unminified version of the library with source maps & comments (otherwise, production' + GulpTask.helpMargin + 38 | 'bundle created)', 39 | 'verbose' : 'Output all TypeScript files being compiled & JavaScript files included in the external library', 40 | 'version' : 'Version number to set build library (if omitted, version from package.json is used)' 41 | }; 42 | 43 | /** 44 | * @property {ICommandLineArgs} args - Command line arguments; 45 | */ 46 | private _args: ICommandLineArgs = yargs.argv; 47 | 48 | /** @constructor */ 49 | constructor(done: gulp.TaskCallback) { 50 | super(); 51 | Utils.log('Packaging library using webpack'); 52 | 53 | // load webpack config settings 54 | let config: webpack.Configuration = new webpackConfig.WebPackConfig(); 55 | 56 | let webpackPlugins: webpack.Plugin[] = []; 57 | // if dev mode, write source maps & keep comments 58 | if (!this._args.dev) { 59 | config.output.filename = BuildConfig.OUTPUT_LIB_NAME + '.min.js'; 60 | // use uglify plugin to remove comments & sourcemaps 61 | webpackPlugins.push(new webpack.optimize.UglifyJsPlugin()); 62 | } else { // else gen un-uglified & include inline sourcemaps 63 | config.output.filename = BuildConfig.OUTPUT_LIB_NAME + '.js'; 64 | config.devtool = 'inline-source-map'; 65 | } 66 | 67 | // add banner to the generated file 68 | webpackPlugins.push( 69 | new webpack.BannerPlugin(BuildConfig.BANNER_JS) 70 | ); 71 | 72 | // add plugins to config 73 | config.plugins = webpackPlugins; 74 | 75 | let rootSource: string = path.join(__dirname, '../../..', BuildConfig.SOURCE); 76 | 77 | // build webpack bundle 78 | return gulp.src([ 79 | path.join(rootSource, 'core/core.ts'), 80 | path.join(rootSource, 'core/components.ts') 81 | ]) 82 | .pipe(webpackStream(config, webpack)) 83 | .pipe(gulp.dest(BuildConfig.OUTPUT_PATH)); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /build/gulp/tasks/clean-build.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import { BuildConfig } from '../../config/build'; 4 | import { Utils } from '../utils'; 5 | import * as yargs from 'yargs'; 6 | let $: any = require('gulp-load-plugins')({ lazy: true }); 7 | 8 | /** 9 | * Removes all generated JavaScript from TypeScript used in the build as the gulp task 'clean-build-ts'. 10 | * 11 | * @class 12 | */ 13 | export class GulpTask extends BaseGulpTask { 14 | 15 | /** 16 | * @property {string} description - Help description for the task. 17 | */ 18 | public static description: string = 'Removes all generated JavaScript from TypeScript used in the build'; 19 | 20 | /** 21 | * @property {Object} options - Any command line flags that can be passed to the task. 22 | */ 23 | public static options: any = { 24 | 'verbose': 'Output all TypeScript files being removed' 25 | }; 26 | 27 | /** 28 | * @property {ICommandLineArgs} args - Command line arguments; 29 | */ 30 | private _args: ICommandLineArgs = yargs.argv; 31 | 32 | /** @constructor */ 33 | constructor(done: gulp.TaskCallback) { 34 | super(); 35 | Utils.log('Removing generated build JavaScript files from source tree'); 36 | 37 | let options: gulp.SrcOptions = { 38 | read: false 39 | }; 40 | 41 | // get all build JS files 42 | let tempFiles: string[] = BuildConfig.BUILD_JS; 43 | // .. add build reports 44 | tempFiles.push(BuildConfig.BUILDRPT_PATH); 45 | // .. less the JS that should be kept 46 | BuildConfig.BUILD_KEEP_JS.forEach((keepFile: string) => { 47 | tempFiles.push('!' + keepFile); 48 | }); 49 | 50 | return gulp.src(tempFiles, options) 51 | .pipe($.if(this._args.verbose, $.print())) 52 | .pipe($.rimraf()); 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /build/gulp/tasks/clean-lib.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import { BuildConfig } from '../../config/build'; 4 | import { Utils } from '../utils'; 5 | import * as yargs from 'yargs'; 6 | let $: any = require('gulp-load-plugins')({ lazy: true }); 7 | 8 | /** 9 | * Removes all generated JavaScript from TypeScript used in the app as the gulp task 'clean-lib-ts'. 10 | * 11 | * @class 12 | */ 13 | export class GulpTask extends BaseGulpTask { 14 | 15 | /** 16 | * @property {string} description - Help description for the task. 17 | */ 18 | public static description: string = 'Removes all generated JavaScript from TypeScript used in the app'; 19 | 20 | /** 21 | * @property {Object} options - Any command line flags that can be passed to the task. 22 | */ 23 | public static options: any = { 24 | 'verbose': 'Output all TypeScript files being removed' 25 | }; 26 | 27 | /** 28 | * @property {ICommandLineArgs} args - Command line arguments; 29 | */ 30 | private _args: ICommandLineArgs = yargs.argv; 31 | 32 | /** @constructor */ 33 | constructor(done: gulp.TaskCallback) { 34 | super(); 35 | Utils.log('Removing generated app JavaScript files from source tree'); 36 | 37 | let options: gulp.SrcOptions = { 38 | read: false 39 | }; 40 | 41 | // get all build JS files 42 | let tempFiles: string[] = BuildConfig.LIB_JS; 43 | // .. add output files 44 | tempFiles.push(BuildConfig.OUTPUT_PATH); 45 | // .. less the JS that should be kept 46 | BuildConfig.LIB_KEEP_JS.forEach((keepFile: string) => { 47 | tempFiles.push('!' + keepFile); 48 | }); 49 | 50 | return gulp.src(tempFiles, options) 51 | .pipe($.if(this._args.verbose, $.print())) 52 | .pipe($.rimraf()); 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /build/gulp/tasks/clean.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import * as runSequence from 'run-sequence'; 4 | 5 | /** 6 | * Removes all transpiled TypeScript files as the gulp task 'clean'. 7 | * 8 | * @class 9 | */ 10 | export class GulpTask extends BaseGulpTask { 11 | 12 | /** 13 | * @property {string} description - Help description for the task. 14 | */ 15 | public static description: string = 'Removes all transpiled TypeScript files'; 16 | 17 | /** 18 | * @property {string[]} aliases - Different options to run the task. 19 | */ 20 | public static aliases: string[] = ['c']; 21 | 22 | /** 23 | * @property {Object} options - Any command line flags that can be passed to the task. 24 | */ 25 | public static options: any = { 26 | 'verbose': 'Output all files being removed' 27 | }; 28 | 29 | /** 30 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 31 | */ 32 | public static dependencies: string[] = []; 33 | 34 | /** @constructor */ 35 | constructor(done: gulp.TaskCallback) { 36 | super(); 37 | runSequence('clean-build', 'clean-lib', done); 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /build/gulp/tasks/transpile-ts.ts: -------------------------------------------------------------------------------- 1 | import {BaseGulpTask} from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import {Utils} from '../utils'; 4 | import * as yargs from 'yargs'; 5 | let $: any = require('gulp-load-plugins')({ lazy: true }); 6 | 7 | /** 8 | * Transpiles all TypeScript as JavaScript as the gulp task 'transpile-ts'. 9 | * 10 | * @class 11 | */ 12 | export class GulpTask extends BaseGulpTask { 13 | 14 | /** 15 | * @property {string} description - Help description for the task. 16 | */ 17 | public static description: string = 'Builds all TypeScript as JavaScript'; 18 | 19 | /** 20 | * @property {string[]} aliases - Different options to run the task. 21 | */ 22 | public static aliases: string[] = ['tts']; 23 | 24 | /** 25 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 26 | */ 27 | public static dependencies: string[] = []; 28 | 29 | /** 30 | * @property {Object} options - Any command line flags that can be passed to the task. 31 | */ 32 | public static options: any = { 33 | 'verbose': 'Output all TypeScript files being built' 34 | }; 35 | 36 | /** 37 | * @property {ICommandLineArgs} args - Command line arguments; 38 | */ 39 | private _args: ICommandLineArgs = yargs.argv; 40 | 41 | /** @constructor */ 42 | constructor() { 43 | super(); 44 | Utils.log('Transpiling app TypeScript files to JavaScript'); 45 | 46 | // use the TypeScript project config file for all settings 47 | let tsProject: any = $.typescript.createProject('tsconfig.json'); 48 | 49 | // compile all TypeScript files, including sourcemaps inline in the generated JavaScript 50 | let result: any = tsProject.src() 51 | .pipe($.plumber()) 52 | .pipe($.if(this._args.verbose, $.print())) 53 | .pipe($.sourcemaps.init()) 54 | .pipe(tsProject()); 55 | 56 | return result.js 57 | .pipe($.sourcemaps.write()) 58 | .pipe(gulp.dest('')); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /build/gulp/tasks/validate-build.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import { Utils } from '../utils'; 3 | import * as gulp from 'gulp'; 4 | import * as runSequence from 'run-sequence'; 5 | 6 | /** 7 | * Watches for file change and automatically run vet, test, transpile, build. 8 | * 9 | * @class 10 | */ 11 | export class GulpTask extends BaseGulpTask { 12 | 13 | /** 14 | * @property {string} description - Help description for the task. 15 | */ 16 | public static description: string = 'Validates the build runs \'vet\', \'transpile-ts\', \'build-lib\' and \'test\' in a sequence' 17 | + GulpTask.helpMargin; 18 | 19 | /** 20 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 21 | */ 22 | public static dependencies: string[] = []; 23 | 24 | /** 25 | * @property {string[]} aliases - Different options to run the task. 26 | */ 27 | public static aliases: string[] = ['vb', 'VB']; 28 | 29 | /** 30 | * @property {Object} options - Any command line flags that can be passed to the task. 31 | */ 32 | public static options: any = { 33 | 'debug': 'Affects \'test\' task, sets karma log level to DEBUG', 34 | 'dev': 'Create unminified version of the library with source maps & comments (otherwise, production' + GulpTask.helpMargin + 35 | 'bundle created)', 36 | 'specs': 'Affects \'test\' task, outputs all tests being run', 37 | 'verbose': 'Affects \'test\' and \'build-lib\' tasks, outputs all TypeScript files being compiled & JavaScript ' + GulpTask.helpMargin + 38 | 'files included in the external library, set karma log level to INFO', 39 | 'version': 'Affects \'build-lib\' task, version number to set build library (if omitted, version from' + GulpTask.helpMargin + 40 | 'package.json is used)' 41 | }; 42 | 43 | /** @constructor */ 44 | constructor(cb: gulp.TaskCallback) { 45 | super(); 46 | 47 | Utils.spawnGulpTask('vet', '--noExit') 48 | .on('exit', () => { 49 | runSequence('test', 'build-lib', cb); 50 | }); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /build/gulp/tasks/vet-build-ts.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import { BuildConfig } from '../../config/build'; 4 | import { Utils } from '../utils'; 5 | import * as yargs from 'yargs'; 6 | let $: any = require('gulp-load-plugins')({ lazy: true }); 7 | 8 | /** 9 | * Vets the code style & quality of all build-related TypeScript as the gulp task 'vet-build-ts'. 10 | * 11 | * @class 12 | */ 13 | export class GulpTask extends BaseGulpTask { 14 | 15 | /** 16 | * @property {string} description - Help description for the task. 17 | */ 18 | public static description: string = 'Run code quality & style analysis on all build-realted ' + 19 | 'TypeScript (code used to build & ' + GulpTask.helpMargin + 'maintain project)'; 20 | 21 | /** 22 | * @property {Object} options - Any command line flags that can be passed to the task. 23 | */ 24 | public static options: any = { 25 | 'noExit': 'Flag if failed vetting should not emit error this terminating the process', 26 | 'verbose': 'Output all TypeScript files being vetted' 27 | }; 28 | 29 | /** 30 | * @property {ICommandLineArgs} args - Command line arguments; 31 | */ 32 | private _args: ICommandLineArgs = yargs.argv; 33 | 34 | /** @constructor */ 35 | constructor(done: IVoidCallback) { 36 | super(); 37 | Utils.log('Vetting build TypeScript code'); 38 | return gulp.src(BuildConfig.BUILD_TYPESCRIPT) 39 | .pipe($.if(this._args.verbose, $.print())) 40 | .pipe($.tslint({ 41 | configuration: BuildConfig.ROOT + '/tslint.json', 42 | emitError: this._args.noExit ? false : true, 43 | summarizeFailureOutput: true 44 | })) 45 | .pipe($.tslint.report()); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /build/gulp/tasks/vet-lib-js.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import { BuildConfig } from '../../config/build'; 4 | import { Utils } from '../utils'; 5 | import * as yargs from 'yargs'; 6 | let $: any = require('gulp-load-plugins')({ lazy: true }); 7 | let Glob: any = require('glob').Glob; 8 | 9 | /** 10 | * Vets the code style & quality of all library related JavaScript as the gulp task 'vet-lib-js'. 11 | * 12 | * @class 13 | */ 14 | export class GulpTask extends BaseGulpTask { 15 | 16 | /** 17 | * @property {string} description - Help description for the task. 18 | */ 19 | public static description: string = 'Run code quality & style analysis on all library JavaScript (some demo source code)'; 20 | 21 | /** 22 | * @property {Object} options - Any command line flags that can be passed to the task. 23 | */ 24 | public static options: any = { 25 | 'noExit': 'Flag if failed vetting should not emit error this terminating the process', 26 | 'verbose': 'Output all JavaScript files being vetted' 27 | }; 28 | 29 | /** 30 | * @property {ICommandLineArgs} args - Command line arguments; 31 | */ 32 | private _args: ICommandLineArgs = yargs.argv; 33 | 34 | /** @constructor */ 35 | constructor(done: IVoidCallback) { 36 | super(); 37 | Utils.log('Vetting library JavaScript code'); 38 | 39 | let allJavaScript: string[] = []; 40 | 41 | // get all JS in the library except files that are explicitly excluded 42 | BuildConfig.LIB_JS.forEach((libJsPattern: string) => { 43 | // convert pattern to glob pattern 44 | allJavaScript.push(libJsPattern.replace('/*/', '/**/')); 45 | }); 46 | // add to the glob pattern files that should be excluded 47 | allJavaScript = allJavaScript.concat(BuildConfig.LIB_EXCLUDE_LINT_JS); 48 | 49 | // find all JS files generated by TypeScript & exclude them from vetting 50 | let pattern: string = './src/*(core|components)/**/*.ts'; 51 | let g: any = new Glob(pattern, (error: Error, matches: string[]) => { 52 | matches.forEach((match: string) => { 53 | let jsFile: string = match.replace('.ts', '.js'); 54 | allJavaScript.push('!' + jsFile); 55 | }); 56 | 57 | // vet all non-generated JS files 58 | return gulp.src(allJavaScript) 59 | .pipe($.if(this._args.verbose, $.print())) 60 | .pipe($.eslint()) 61 | .pipe($.eslint.format()) 62 | .pipe($.eslint.failAfterError()); 63 | }); 64 | } 65 | 66 | } 67 | -------------------------------------------------------------------------------- /build/gulp/tasks/vet-lib-ts.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import * as gulp from 'gulp'; 3 | import { BuildConfig } from '../../config/build'; 4 | import { Utils } from '../utils'; 5 | import * as yargs from 'yargs'; 6 | let $: any = require('gulp-load-plugins')({ lazy: true }); 7 | 8 | /** 9 | * Vets the code style & quality of all library related TypeScript as the gulp task 'vet-lib-ts'. 10 | * 11 | * @class 12 | */ 13 | export class GulpTask extends BaseGulpTask { 14 | 15 | /** 16 | * @property {string} description - Help description for the task. 17 | */ 18 | public static description: string = 'Run code quality & style analysis on all library TypeScript (source code for the directives)'; 19 | 20 | /** 21 | * @property {Object} options - Any command line flags that can be passed to the task. 22 | */ 23 | public static options: any = { 24 | 'noExit': 'Flag if failed vetting should not emit error this terminating the process', 25 | 'verbose': 'Output all TypeScript files being vetted' 26 | }; 27 | 28 | /** 29 | * @property {ICommandLineArgs} args - Command line arguments; 30 | */ 31 | private _args: ICommandLineArgs = yargs.argv; 32 | 33 | /** @constructor */ 34 | constructor(done: IVoidCallback) { 35 | super(); 36 | Utils.log('Vetting library TypeScript code'); 37 | 38 | let allTypeScript: string[] = BuildConfig.LIB_TYPESCRIPT.concat(BuildConfig.LIB_TEST_TYPESCRIPT); 39 | 40 | return gulp.src(allTypeScript) 41 | .pipe($.if(this._args.verbose, $.print())) 42 | .pipe($.tslint({ 43 | configuration: BuildConfig.ROOT + '/tslint.json', 44 | emitError: this._args.noExit ? false : true, 45 | summarizeFailureOutput: true 46 | })) 47 | .pipe($.tslint.report()); 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /build/gulp/tasks/vet.ts: -------------------------------------------------------------------------------- 1 | import { BaseGulpTask } from '../BaseGulpTask'; 2 | import { Utils } from '../utils'; 3 | 4 | /** 5 | * Vets all built files as the gulp task 'vet'. 6 | * 7 | * @class 8 | */ 9 | export class GulpTask extends BaseGulpTask { 10 | 11 | /** 12 | * @property {string} description - Help description for the task. 13 | */ 14 | public static description: string = 'Vets all built files'; 15 | 16 | /** 17 | * @property {string[]} dependencies - Array of all tasks that should be run before this one. 18 | */ 19 | public static dependencies: string[] = ['vet-build-ts', 'vet-lib-ts', 'vet-lib-js']; 20 | 21 | /** 22 | * @property {string[]} aliases - Different options to run the task. 23 | */ 24 | public static aliases: string[] = ['v', 'V']; 25 | 26 | /** 27 | * @property {Object} options - Any command line flags that can be passed to the task. 28 | */ 29 | public static options: any = { 30 | 'noExit': 'Flag if failed vetting should not emit error this terminating the process', 31 | 'verbose': 'Output all TypeScript & JavaScript files being vetted' 32 | }; 33 | 34 | /** @constructor */ 35 | constructor() { 36 | super(); 37 | Utils.log('Vetting code'); 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /build/gulp/utils.ts: -------------------------------------------------------------------------------- 1 | import * as events from 'events'; 2 | import * as childProcess from 'child_process'; 3 | let $: any = require('gulp-load-plugins')({ lazy: true }); 4 | 5 | export class Utils { 6 | /** 7 | * Log a message or series of messages using chalk's blue color. 8 | * Can pass in a string, object or array. 9 | * 10 | * @param {(string|string[]} message - Message(s) to write to the log. 11 | */ 12 | public static log(message: string | string[]): void { 13 | if (typeof (message) === 'object') { 14 | for (let item in message) { 15 | if (message.hasOwnProperty(item)) { 16 | $.util.log($.util.colors.blue(message[item])); 17 | } 18 | } 19 | } else { 20 | $.util.log($.util.colors.blue(message)); 21 | } 22 | } 23 | 24 | /** 25 | * Logs any errors that are passed in & publishes the 'end' event. 26 | * 27 | * @param {Object} error - Error object to log. 28 | */ 29 | public static handleError(error: IGulpError): void { 30 | // log the error 31 | $.util.log(error.toString()); 32 | 33 | // publish the event 34 | let eventEmitter: NodeJS.EventEmitter = new events.EventEmitter(); 35 | eventEmitter.emit('end'); 36 | } 37 | 38 | /** 39 | * Spawns a child gulp task with additional command line arguments which run-sequence does not support. 40 | * 41 | * @param {string} task - Gulp task to run. 42 | * @param {string[]} ...taskArgs - Arguments passed to gulp task. 43 | */ 44 | public static spawnGulpTask: (task: string, ...taskArgs: string[]) => childProcess.ChildProcess = 45 | (task: string, ...taskArgs: string[]) => { 46 | let isWindows: boolean = (process.platform.lastIndexOf('win') === 0); 47 | 48 | let command: string = isWindows ? 'cmd.exe' : 'sh'; 49 | let args: string = ['gulp ' + task].concat(process.argv.slice(3)).concat(taskArgs).join(' '); 50 | 51 | if (isWindows) { 52 | return childProcess.spawn(command, ['/c', args], { env: process.env, stdio: 'inherit' }); 53 | } 54 | 55 | return childProcess.spawn(command, ['-c', args], { env: process.env, stdio: 'inherit' }); 56 | } 57 | 58 | } 59 | -------------------------------------------------------------------------------- /build/scripts/ScriptUtils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Library version dependencies this library has. 3 | * 4 | * @typedef libraryDependencies 5 | * @type {Object} 6 | * @prop {string?} angular - Version of Angular required. 7 | * @prop {string?} officeUiFabric - Version of the Office UI Fabric required. 8 | */ 9 | export interface ILibraryDependencies { 10 | angularLib?: string; 11 | officeUiFabricLib?: string; 12 | } 13 | 14 | export class ScriptUtils { 15 | /** 16 | * Gets the version of the library from the package.json file unless 17 | * the version is specified as the enviroment variable VERSION. 18 | * 19 | * @param {string} sourcePath - location where the source repo resides 20 | * 21 | * @returns string 22 | */ 23 | public static getLibraryVersion(sourcePath: string): string { 24 | if (process.env.VERSION === undefined) { 25 | return require(sourcePath + '/package.json').version; 26 | } else { 27 | return process.env.VERSION; 28 | } 29 | } 30 | 31 | /** 32 | * Gets the library dependencies in the current library from the 33 | * package.json. 34 | * 35 | * @param {string} sourcePath - location where the source repo resides 36 | * 37 | * @returns ILibraryDependencies 38 | */ 39 | public static getDependencies(sourcePath: string): ILibraryDependencies { 40 | // get the dependencies 41 | let libDeps: any = require(sourcePath + '/package.json').dependencies; 42 | 43 | // create new dep object & export 44 | let dependencies: ILibraryDependencies = { 45 | angularLib: libDeps.angular, 46 | officeUiFabricLib: libDeps['office-ui-fabric'] 47 | }; 48 | 49 | return dependencies; 50 | } 51 | 52 | } 53 | -------------------------------------------------------------------------------- /build/scripts/build-library.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | ARG_DEFS=( 4 | "--srcwd=(.*)" 5 | "--artifactwd=(.*)" 6 | ) 7 | 8 | function init { 9 | # get version 10 | VERSION="$(readJsonProp "$SRCWD/package.json" "version")" 11 | } 12 | 13 | function run { 14 | # make sure version != last tag, 15 | # if so, abort as nothing to do 16 | if isNewVersion $VERSION ; then 17 | echo "WARN: not a new version; aborting " 18 | exit 0 19 | fi 20 | 21 | # build library 22 | echo "INFO: compiling prod & debug library" 23 | gulp build-lib 24 | gulp build-lib --dev 25 | 26 | # copy library to artifacts 27 | cp $SRCWD/dist/** $ARTIFACTWD 28 | } 29 | 30 | source $(dirname $0)/utils.inc 31 | -------------------------------------------------------------------------------- /build/scripts/check-pr.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # This script is used to automate and speed up the merging of PR's. It prompts for the 4 | # PR number & source repo+branch at first, then it does the following: 5 | # 1. create a new branch `pr###` from `dev` 6 | # 2. pulls the code from the remote repo+branch into the new local `pr` branch 7 | # 3. removes `node_modules` & `dist` folders 8 | # 4. installs all node modules 9 | # 5. cleans all typescript 10 | # 6. compiles all TypeScript to JavaScript 11 | # 7. vets all code 12 | # 8. runs all tests 13 | # 9. builds library 14 | # 10. launches local demo 15 | 16 | echo "" 17 | echo "GETTING A PULL RELEASE AND RUNNING THROUGH THE INITIAL TESTS FOR ANAYLASIS" 18 | echo "" 19 | 20 | # jump up to the root of the repo 21 | cd ../.. 22 | SRC_PATH=$PWD 23 | 24 | # make sure in root of repo 25 | if [ "${SRC_PATH##*/}" != "ng-officeuifabric" ]; then 26 | echo "ERROR: script must be run from the root of the 'ng-officeuifabric' repo" 27 | echo "ERROR: you are running from '${SRC_PATH##*/}'" 28 | exit 1 29 | fi 30 | 31 | echo "LOG: current folder: $SRC_PATH" 32 | 33 | # prompt for pr# & repo+branch 34 | echo "Please provide the pull release number & the repo+branch where the PR" 35 | echo " source resides. Get the repo+branch from the PR details, sepecifically the" 36 | echo " section on the page 'Merging Via Command Line'" 37 | read -p "What PR# is this? (###) " prNum 38 | read -p "Forked repo source of PR? (URL to forked repo) " prForkedRepo 39 | read -p "Forked repo branch of PR? (branch name) " prForkedBranch 40 | read -p "Name of directive to test? (leave blank to skip launching demo) " prDirective 41 | 42 | echo "" 43 | echo "Using the following values..." 44 | echo " pr#: $prNum" 45 | echo " repo: $prForkedRepo" 46 | echo " branch: $prForkedBranch" 47 | echo " directive: $prDirective" 48 | echo "" 49 | 50 | # create branch for PR & pull 51 | echo ".. creating new branch & pulling down source in PR" 52 | git checkout dev 53 | git checkout -b pr$prNum 54 | git pull $prForkedRepo $prForkedBranch 55 | 56 | # clean up 57 | echo ".. clean out node_modules & build libraries" 58 | rm -rf node_modules 59 | rm -rf dist 60 | 61 | # get all modules 62 | echo ".. installing node modules" 63 | yarn install 64 | 65 | # compile typescript (to run the gulp clean command) 66 | echo ".. compile TypeScript" 67 | npm run build:ts 68 | 69 | # clean all typescript (get rid of everything before running a clean build) 70 | echo ".. remove all TypeScript" 71 | gulp clean 72 | 73 | # compile typescript 74 | echo ".. recompiling all TypeScript" 75 | npm run build:ts 76 | 77 | # vet all code 78 | echo ".. vetting all library TypeScript" 79 | gulp vet-lib-ts --verbose 80 | 81 | # run all tests 82 | echo ".. running all tests" 83 | gulp test --verbose 84 | 85 | # build library 86 | echo ".. build the library files" 87 | npm run build:lib 88 | 89 | # open demo 90 | if [[ -n "${prDirective// }" ]]; then 91 | echo ".. opening demo" 92 | open src/components/$prDirective/demo/index.html 93 | else 94 | echo ".. skipping demo" 95 | fi 96 | 97 | echo "FINISHED PR CHECK SCRIPT!" 98 | -------------------------------------------------------------------------------- /build/scripts/tag-release.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | ARG_DEFS=( 4 | "--srcwd=(.*)" 5 | ) 6 | 7 | function init { 8 | # get version 9 | VERSION="$(readJsonProp "$SRCWD/package.json" "version")" 10 | } 11 | 12 | function run { 13 | # make sure version != last tag, 14 | # if so, abort as nothing to do 15 | if isNewVersion $VERSION ; then 16 | echo "WARN: not a new version; aborting " 17 | exit 0 18 | fi 19 | 20 | echo "INFO: adding tag for version $VERSION & pushing orign master" 21 | git tag -f $VERSION 22 | git push --tags 23 | 24 | } 25 | 26 | source $(dirname $0)/utils.inc 27 | -------------------------------------------------------------------------------- /build/scripts/update-nuget-repo.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # NOTE: DO NOT RUN THIS SCRIPT UNLESS CREATING A RELEASE!!!!!!!! 4 | # This should only be done by the project owner(s). If it is run by mistake, it will 5 | # require cleanup in the main repos resulting in rewriting history & likey screwingup 6 | # most forks. 7 | # 8 | # This script is only used when creating a new release. It expects the following: 9 | # 1. to be run from the `master` branch 10 | # 2. to be run from the root of the repo 11 | # 3. all updates to be included in the release that need to be applied 12 | # have been applied to local `master` including updating package.json to 13 | # the desired release version, the correct angular, office ui fabric & other 14 | # dependencies & the changelog.md has been updated 15 | # 16 | # The script will do the following things: 17 | # 1. clone a copy of nuget-ngofficeuifabric to the specified $PKGWD path 18 | # 2. copy the compiled library & changelog to the cloned nuget-ngofficeuifabric 19 | # 3. update the nuget-ngofficeuifabric repo with the following changes by calling 20 | # update-nuget-versions.js: 21 | # 3.1. update ng-office-ui-fabric.nuspec with current library version 22 | # 3.2. update ng-office-ui-fabric.nuspec with current library dependencies 23 | # 4. update the cloned package repo's origin master: 24 | # 4.1. add all changed files 25 | # 4.2. commit everything with comment "release(): [version]" 26 | # 4.3. push commit => origin master 27 | # 4.4. tag with the current version & push tags to origin 28 | 29 | ARG_DEFS=( 30 | "--srcwd=(.*)" 31 | "--pkgwd=(.*)" 32 | ) 33 | 34 | function init { 35 | # setup paths 36 | SRC_PATH=$SRCWD 37 | PKG_PATH=$PKGWD/nuget-ngofficeuifabric 38 | # setup globals 39 | VERSION="$(readJsonProp "$SRCWD/package.json" "version")" 40 | REPO_URL="https://github.com/ngOfficeUIFabric/nuget-ngofficeuifabric" 41 | } 42 | 43 | function run { 44 | # clone packaging repo 45 | echo "DEBUG: [1 / 4] clone packaging repo" 46 | git clone $REPO_URL $PKG_PATH --depth=2 47 | 48 | 49 | # make sure version != last tag, 50 | # if so, abort as nothing to do 51 | if isNewVersion $VERSION $PKG_PATH ; then 52 | echo "WARN: not a new version; aborting" 53 | exit 0 54 | fi 55 | 56 | 57 | # copy built library & changelog 58 | echo "DEBUG: [2 / 4] copying built library & changelog" 59 | cp -Rf $SRC_PATH/dist/*.js $PKG_PATH/src/content/Scripts 60 | cp -Rf $SRC_PATH/CHANGELOG.md $PKG_PATH/CHANGELOG.md 61 | 62 | 63 | # update versions & dependencies in ng-office-ui-fabric.nuspec 64 | echo "DEBUG: [3 / 4] updating versions & dependencies in ng-office-ui-fabric.nuspec" 65 | node $SRC_PATH/build/scripts/update-nuget-versions.js --src=$SRC_PATH --pkg=$PKG_PATH 66 | 67 | 68 | # update packaging repo 69 | echo "DEBUG: [4 / 4] updating packaging repo nuget-ngofficeuifabric" 70 | cd $PKG_PATH 71 | echo "DEBUG: .. adding & commiting changes to package repo" 72 | git add -A 73 | git commit -m "release(): $VERSION" 74 | echo "DEBUG: .. pushing origin master" 75 | git push -q origin master 76 | 77 | echo "DEBUG: .. adding tag for version $VERSION & pushing orign master" 78 | git tag -f $VERSION 79 | echo "DEBUG: .. pushing origin master tags" 80 | git push --tags 81 | } 82 | 83 | source $(dirname $0)/utils.inc 84 | -------------------------------------------------------------------------------- /build/scripts/update-nuget-versions.ts: -------------------------------------------------------------------------------- 1 | // updates the ng-office-ui-fabric.nuspec in the ngOfficeUiFabric nuget 2 | // repo (nuget-ngofficeuifabric) to have the same version & dependencies 3 | // that are specified in the main source repo's (ng-officeuifabric) 4 | // package.json file 5 | // 6 | // two parameters are expected: 7 | // --src = location of the cloned source repo (ng-officeuifabric) 8 | // --pkg = location of the cloned package repo (nuget-ngofficeuifabric) 9 | 10 | import { ScriptUtils, ILibraryDependencies } from './ScriptUtils'; 11 | import * as fs from 'fs'; 12 | import * as yargs from 'yargs'; 13 | import * as xmldom from 'xmldom'; 14 | let xpath: any = require('xpath'); 15 | 16 | let argKeys: any = { 17 | pkg: 'pkg', 18 | src: 'src' 19 | }; 20 | 21 | // verify required params passed in 22 | if (!yargs.argv[argKeys.src] || !yargs.argv[argKeys.pkg]) { 23 | console.error('must specify the path to \'--src\' & \'--pkg\''); 24 | process.exit(); 25 | } 26 | 27 | // nuspec file 28 | let nuspecFile: string = yargs.argv[argKeys.pkg] + '/src/ng-office-ui-fabric.nuspec'; 29 | 30 | // get library version & dependencies 31 | let libraryVersion: string = ScriptUtils.getLibraryVersion(yargs.argv[argKeys.src]); 32 | let deps: ILibraryDependencies = ScriptUtils.getDependencies(yargs.argv[argKeys.src]); 33 | 34 | // load XML 35 | let domParser: DOMParser = new xmldom.DOMParser(); 36 | let packageContents: string = fs.readFileSync(nuspecFile).toString(); 37 | let packageManifest: Document = domParser.parseFromString(packageContents, 'text/xml'); 38 | let query: any = xpath.useNamespaces({ nuget: 'http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd' }); 39 | 40 | // update nuspec 41 | // update package version 42 | let versionNode: Node = query('/nuget:package/nuget:metadata/nuget:version', packageManifest, true); 43 | versionNode.textContent = libraryVersion; 44 | // update anuglar version 45 | let angularVersionNode: any = query( 46 | '/nuget:package/nuget:metadata/nuget:dependencies/nuget:dependency[@id=\'AngularJS.Core\']', 47 | packageManifest, 48 | true); 49 | angularVersionNode.setAttribute('version', deps.angularLib); 50 | // update fabric version 51 | let fabricVersionNode: any = query( 52 | '/nuget:package/nuget:metadata/nuget:dependencies/nuget:dependency[@id=\'OfficeUIFabric\']', 53 | packageManifest, 54 | true); 55 | fabricVersionNode.setAttribute('version', deps.officeUiFabricLib); 56 | 57 | // save file changes 58 | let domSerialzer: XMLSerializer = new xmldom.XMLSerializer(); 59 | fs.writeFileSync(yargs.argv[argKeys.pkg] + '/src/ng-office-ui-fabric.nuspec', domSerialzer.serializeToString(packageManifest)); 60 | -------------------------------------------------------------------------------- /build/scripts/update-package-repo.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # NOTE: DO NOT RUN THIS SCRIPT UNLESS CREATING A RELEASE!!!!!!!! 4 | # This should only be done by the project owner(s). If it is run by mistake, it will 5 | # require cleanup in the main repos resulting in rewriting history & likey screwingup 6 | # most forks. 7 | # 8 | # This script is only used when creating a new release. It expects the following: 9 | # 1. to be run from the `master` branch 10 | # 2. to be run from the root of the repo 11 | # 3. all updates to be included in the release that need to be applied 12 | # have been applied to local `master` including updating package.json to 13 | # the desired release version, the correct angular, office ui fabric & other 14 | # dependencies & the changelog.md has been updated 15 | # 16 | # The script will do the following things: 17 | # 1. clone a copy of package-ngofficeuifabric to a temp location 18 | # 2. copy the compiled library & changelog to the cloned package-ngofficeuifabric 19 | # 3. update the package-ngofficeuifabric repo with the following changes by calling 20 | # update-pkg-versions.js: 21 | # 3.1. update bower.json with current library dependencies 22 | # 3.2. update bower.json with current library version 23 | # 3.3. update package.json with current library dependencies 24 | # 3.4. update package.json with current library version 25 | # 4. update the cloned package repo's origin master: 26 | # 4.1. add all changed files 27 | # 4.2. commit everything with comment "release(): [version]" 28 | # 4.3. push commit => origin master 29 | # 4.4. tag with the current version & push tags to origin 30 | 31 | ARG_DEFS=( 32 | "--srcwd=(.*)" 33 | "--pkgwd=(.*)" 34 | ) 35 | 36 | function init { 37 | # setup paths 38 | SRC_PATH=$SRCWD 39 | PKG_PATH=$PKGWD/package-ngofficeuifabric 40 | # setup globals 41 | VERSION="$(readJsonProp "$SRCWD/package.json" "version")" 42 | REPO_URL="https://github.com/ngOfficeUIFabric/package-ngofficeuifabric" 43 | } 44 | 45 | function run { 46 | # clone packaging repo 47 | echo "DEBUG: [1 / 4] clone packaging repo" 48 | git clone $REPO_URL $PKG_PATH --depth=2 49 | 50 | 51 | # make sure version != last tag, 52 | # if so, abort as nothing to do 53 | if isNewVersion $VERSION $PKG_PATH ; then 54 | echo "WARN: not a new version; aborting" 55 | exit 0 56 | fi 57 | 58 | 59 | # copy built library & changelog 60 | echo "DEBUG: [2 / 4] copying built library & changelog" 61 | cp -Rf $SRC_PATH/dist/*.js $PKG_PATH 62 | cp -Rf $SRC_PATH/CHANGELOG.md $PKG_PATH/CHANGELOG.md 63 | 64 | 65 | # update versions & dependencies in ng-office-ui-fabric.nuspec 66 | echo "DEBUG: [3 / 4] updating versions & dependencies in package.json & bower.json" 67 | node $SRC_PATH/build/scripts/update-package-versions.js --src=$SRC_PATH --pkg=$PKG_PATH 68 | 69 | 70 | # update packaging repo 71 | echo "DEBUG: [4 / 4] updating packaging repo package-ngofficeuifabric" 72 | cd $PKG_PATH 73 | echo "DEBUG: .. adding & commiting changes to package repo" 74 | git add -A 75 | git commit -m "release(): $VERSION" 76 | echo "DEBUG: .. pushing origin master" 77 | git push -q origin master 78 | 79 | echo "DEBUG: .. adding tag for version $VERSION & pushing orign master" 80 | git tag -f $VERSION 81 | echo "DEBUG: .. pushing origin master tags" 82 | git push --tags 83 | 84 | } 85 | 86 | source $(dirname $0)/utils.inc 87 | -------------------------------------------------------------------------------- /build/scripts/update-package-versions.ts: -------------------------------------------------------------------------------- 1 | // updates the package.json & bower.json in the ngOfficeUiFabric packaging 2 | // repo (package-ngofficeuifabric) to have the same version & dependencies 3 | // that are specified in the main source repo's (ng-officeuifabric) 4 | // package.json file 5 | // 6 | // two parameters are expected: 7 | // --src = location of the cloned source repo (ng-officeuifabric) 8 | // --pkg = location of the cloned package repo (ngofficeuifabric) 9 | 10 | import { ScriptUtils, ILibraryDependencies } from './ScriptUtils'; 11 | import * as fs from 'fs'; 12 | import * as yargs from 'yargs'; 13 | 14 | let argKeys: any = { 15 | pkg: 'pkg', 16 | src: 'src' 17 | }; 18 | 19 | // verify required params passed in 20 | if (!yargs.argv[argKeys.src] || !yargs.argv[argKeys.pkg]) { 21 | console.error('must specify the path to \'--src\' & \'--pkg\''); 22 | process.exit(); 23 | } 24 | 25 | // get library version & dependencies 26 | let libraryVersion: string = ScriptUtils.getLibraryVersion(yargs.argv[argKeys.src]); 27 | let deps: ILibraryDependencies = ScriptUtils.getDependencies(yargs.argv[argKeys.src]); 28 | 29 | // update bower 30 | let bowerManifest: any = require(yargs.argv[argKeys.pkg] + '/bower.json'); 31 | bowerManifest.version = libraryVersion; 32 | bowerManifest.dependencies = { 33 | 'angular': deps.angularLib, 34 | 'office-ui-fabric': deps.officeUiFabricLib 35 | }; 36 | // write bower file back 37 | fs.writeFileSync(yargs.argv[argKeys.pkg] + '/bower.json', JSON.stringify(bowerManifest, null, 2)); 38 | 39 | 40 | // update package 41 | let packageManifest: any = require(yargs.argv[argKeys.pkg] + '/package.json'); 42 | packageManifest.version = libraryVersion; 43 | packageManifest.dependencies = { 44 | 'angular': deps.angularLib, 45 | 'office-ui-fabric': deps.officeUiFabricLib 46 | }; 47 | // write bower file back 48 | fs.writeFileSync(yargs.argv[argKeys.pkg] + '/package.json', JSON.stringify(packageManifest, null, 2)); 49 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 5.7.0 4 | environment: 5 | COVERALLS_REPO_TOKEN: 6LtFtuOYJuMlHy6vhsRj7lYhYuoo5ZLMs 6 | COVERALLS_SERVICE_NAME: circle-ci 7 | # > NOTE: these are set in the project settings within circleci 8 | # GIT_PUSH_DRYRUN 9 | 10 | general: 11 | artifacts: 12 | # compiled library 13 | - "transpiled-libraries" 14 | # code coverage report 15 | - "code-coverage" 16 | # deployment cache 17 | - "depoyment-cache" 18 | 19 | dependencies: 20 | pre: 21 | # install dependencies 22 | - npm install -g gulp 23 | - npm install -g typescript 24 | post: 25 | # compile typescript 26 | - npm run build:ts 27 | 28 | test: 29 | pre: 30 | # vet all TypeScript build code 31 | - gulp vet-build-ts --verbose 32 | # vet all TypeScript library code 33 | - gulp vet-lib-ts --verbose 34 | # vet all non-generated JavaScript code 35 | - gulp vet-lib-js --verbose 36 | post: 37 | # move junit test report => build artifacts 38 | - mkdir $CIRCLE_TEST_REPORTS/junit 39 | - mv ./reports/test/*.xml $CIRCLE_TEST_REPORTS/junit/testrun.xml 40 | # send code coverage report => coveralls.io 41 | - "cat ./reports/code-coverage/**/lcov.info | ./node_modules/coveralls/bin/coveralls.js" 42 | # move code coverage => build artifacts 43 | - mkdir $CIRCLE_ARTIFACTS/code-coverage 44 | - mv ./reports/code-coverage/**/lcov-report/** $CIRCLE_ARTIFACTS/code-coverage 45 | 46 | deployment: 47 | release: 48 | branch: master 49 | commands: 50 | # pre 51 | # > set git 52 | - git config --global user.name "ngfabricbot" 53 | - git config --global user.email "ngofficeuifabric@andrewconnell.com" 54 | 55 | # > tag repo with new version & push back to GitHub 56 | - sudo chmod 755 ./build/scripts/tag-release.sh 57 | - ./build/scripts/tag-release.sh --srcwd=$PWD 58 | 59 | # deployment 60 | - mkdir $CIRCLE_ARTIFACTS/transpiled-libraries 61 | # > build libraries 62 | - sudo chmod 755 ./build/scripts/build-library.sh 63 | - ./build/scripts/build-library.sh --srcwd=$PWD --artifactwd=$CIRCLE_ARTIFACTS/transpiled-libraries 64 | 65 | # update deployments 66 | # > create deployment cache artifact (where local repos will be updated) 67 | - mkdir $CIRCLE_ARTIFACTS/depoyment-cache 68 | 69 | # > deploy to npm, bower, cdnjs 70 | - sudo chmod 755 ./build/scripts/update-package-repo.sh 71 | - ./build/scripts/update-package-repo.sh --srcwd=$PWD --pkgwd=$CIRCLE_ARTIFACTS/depoyment-cache 72 | # > deploy to nuget 73 | - sudo chmod 755 ./build/scripts/update-nuget-repo.sh 74 | - ./build/scripts/update-nuget-repo.sh --srcwd=$PWD --pkgwd=$CIRCLE_ARTIFACTS/depoyment-cache 75 | -------------------------------------------------------------------------------- /docs/guides/CONTRIB-WORKFLOW.md: -------------------------------------------------------------------------------- 1 | # Community Contribution Workflow 2 | 3 | You can contribute to this repo with issues & PRs. Simply filing issues for problem you encounter is a great way to contribute. Contributing bug fixes & features is greatly appreciated! 4 | 5 | ## Getting Started 6 | 7 | For new ideas, always start with an issue before starting development on an implementation. 8 | 9 | You do not need to file an issue for trivial changes such as typo fixes. Just a create a PR for those changes. 10 | 11 | ## PR - CI Process 12 | 13 | The continuous integration (CI) system will automatically perform the required builds and run tests (including the ones you are expected to run) for PRs. Builds and test runs must be clean. 14 | 15 | If the CI build fails for any reason, the PR issue will be updated with a link that can be used to determine the cause of the failure. This is done using [CircleCI](https://circleci.com/gh/ngOfficeUIFabric/ng-officeuifabric). 16 | 17 | ## Suggested Workflow 18 | 19 | The following is recommended for contributing to the repo: 20 | 21 | - Create an issue for your work. 22 | - This can be skipped for trivial changes. 23 | - Reuse an existing issue on the topic, if there is one. 24 | - Get an agreement from core team members before starting work. 25 | - Clearly state you are going to take on implementing it, if that's the case. 26 | - Create a personal fork of the repository on GitHub (if you don't already have one). 27 | - If you already have a fork, ensure it is up to date with the upstream repo (this repo). 28 | 29 | > **NOTE**: Refer to the **[PULL-REQUESTS](PULL-REQUESTS.md)** page for more details on this. 30 | 31 | - Create a branch off **dev**: `git checkout -b mybranch` 32 | - Name the branch so that it clearly communicates your intentions such as **issue-123** or **githubhandle-issue123** 33 | - Branches are useful since they isolate your changes from incoming changes from upstream. They also enable you to create multiple PRs from the same fork. 34 | - Make & commit your changes 35 | - Add new tests corresponding to your change if applicable. 36 | - Build the repo with your changes. 37 | - Make sure that the builds are clean. 38 | - Make sure that the tests are all passing, including your new tests. 39 | - Make sure the code coverage % is no lower than the upstream repo. 40 | - Verify your new or updated directive adheres to all the items in the [DIRECTIVE-CHECKLIST](DIRECTIVE-CHECKLIST.md). 41 | - Push changes to your fork on GitHub. 42 | - Create a pull request (PR) against the upstream repository's **dev** branch. 43 | - Include details in the PR comment what the PR is for. Include a reference to the issue (by number & link). 44 | 45 | > **NOTE**: Refer to the **[PULL-REQUESTS](PULL-REQUESTS.md)** page for more details on this. 46 | 47 | 48 | It is OK to create your PR as a "WIP" (work in progress) on the upstream repo before the implementation is done. This can be useful if you'd like to start the feedback process concurrent with your implementation. **State that this is the case in the initial PR comment.** -------------------------------------------------------------------------------- /docs/guides/MILESTONES.md: -------------------------------------------------------------------------------- 1 | # Milestones & Versioning 2 | 3 | We use **[Semantic Versioning](http://semver.org/)** for this project. You can read up about it at the aforementioned link, but the gist of it is as follows: 4 | 5 | **MAJOR.MINOR.PATCH-release** 6 | 7 | ## MAJOR 8 | 9 | Typically this is only used when a release happens that introduces breaking changes from a previous version. However we will use it to match the current released version of the **[Office UI Fabric](http://dev.office.com/fabric)** released version. 10 | 11 | ## MINOR 12 | 13 | Each time a new component is added to the library we will bump the minor version & issue a new release. 14 | 15 | ## PATCH 16 | 17 | Each time we have a fix / enhancement added to the library we will bump the patch version & issue a new release. 18 | 19 | ## RELEASE 20 | 21 | This is used for release versions. For instance, when we are ready to do a release, we will create a version release like 0.5.0-rc1 which is the release candidate #1 for version 0.5.0. We may have multiple RC's for a version. 22 | 23 | Other options are **alpha** / **beta** as we march to 0.5.0. -------------------------------------------------------------------------------- /docs/guides/REPOS.md: -------------------------------------------------------------------------------- 1 | The following is a brief description of the repositories and their purpose within this organization. 2 | 3 | ## ng-officeuifabric 4 | 5 | The primary source repo for the project containing the Angular directives for the Office UI Fabric. 6 | 7 | ## package-ngofficeuifabric 8 | 9 | The distribution repository for the _ng-officeuifabric_ source used for NPM & Bower. 10 | 11 | ## code.officeuifabric.com 12 | 13 | Source for the website that holds the demos of the stock Office UI Fabric controls. 14 | 15 | ## code.ngofficeuifabric.com 16 | 17 | Source for the website for the project for demos & other information. -------------------------------------------------------------------------------- /docs/guides/SETUP-DEV-MACHINE.md: -------------------------------------------------------------------------------- 1 | # Setup Developer Machine 2 | 3 | The **[Minimal Path To Awesome](MPA.md)** walks through this process in a much more detailed way; this document is the shortened version for those familiar with Node.js based development. 4 | 5 | 1. Install **[Node.js](https://nodejs.org)** 6 | 1. Install global Node.js dependencies: 7 | 8 | ```bash 9 | $ npm install -g typescript 10 | ``` 11 | 12 | 1. Clone the repo 13 | 1. Install all project-specific dependencies: 14 | 15 | ```bash 16 | $ npm install 17 | ``` 18 | 19 | 1. Transpile all TypeScript 20 | 21 | ```bash 22 | $ tsc -p ./ 23 | ``` 24 | 25 | > **NOTE**: This is required as all gulp tasks are written in TypeScript. 26 | 27 | > **NOTE**: If you have an issue with this step, refer to the additional information on this step on the **[Minimal Path To Awesome](MPA.md)** guide. 28 | 29 | At this point you are good to go and can run the gulp tasks. 30 | 31 | ## Setting Up Continuous Builds 32 | 33 | We use CircleCI for continuous builds of the library. All PR's and pushes to `master` & `dev` are run through this process. We strongly recommend you enable CircleCI on your forked repo to test before submitting your PR. If the CircleCI build fails for you, it will fail for us (and vice versa). If it fails, we will reject your PR so please test your work first! 34 | -------------------------------------------------------------------------------- /docs/guides/SLACK.md: -------------------------------------------------------------------------------- 1 | # Slack 2 | 3 | [![Slack Network](http://ngofficeuifabric-slackin.azurewebsites.net/badge.svg)](http://ngofficeuifabric-slackin.azurewebsites.net/) 4 | 5 | We use Slack for a public chat discussion around things that don't need to be tracked in the project's issues list: **http://ngofficeuifabric.slack.com** 6 | 7 | Anyone is welcome... if you are not already in the Slack team, you can request an invite sent to you by submitting your email here: **http://ngofficeuifabric-slackin.azurewebsites.net** 8 | 9 | Various channels are used for different things. We even have 10 | 11 | ## Do Not Use Slack for Tracked Discussions 12 | 13 | We want to ensure that the repo's issues list is used for tracking of any bugs, features, pull requests & other important discussions that need to be preserved. 14 | 15 | As such, Slack is only used for chatter, getting help with the library, code & to get notifications of announcements and alerts related to the repo. -------------------------------------------------------------------------------- /gulpfile.ts: -------------------------------------------------------------------------------- 1 | import * as fs from 'fs'; 2 | import { BuildConfig } from './build/config/build'; 3 | let gulp: any = require('gulp-help')(require('gulp')); 4 | 5 | /** 6 | * yargs variables can be passed in to alter the behavior, when present. 7 | * Example: gulp serve-dev 8 | * 9 | * --verbose : Various tasks will produce more output to the console. 10 | */ 11 | 12 | // +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 13 | 14 | // load all gulp tasks (located in ./build/gulp/tasks) 15 | fs.readdirSync(BuildConfig.GULP_TASKS) 16 | .filter((filename: any) => { 17 | return filename.match(/\.js$/i); 18 | }) 19 | .map((filename: string) => { 20 | return { 21 | GulpTask: require(BuildConfig.GULP_TASKS + '/' + filename).GulpTask, 22 | name: filename.substr(0, filename.length - 3) 23 | }; 24 | }) 25 | .forEach((file: IGulpTaskFile) => { 26 | gulp.task( 27 | file.name, 28 | file.GulpTask.description, 29 | file.GulpTask.dependencies, 30 | file.GulpTask, 31 | { 32 | aliases: file.GulpTask.aliases, 33 | options: file.GulpTask.options 34 | } 35 | ); 36 | }); 37 | -------------------------------------------------------------------------------- /src/components/breadcrumb/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js -------------------------------------------------------------------------------- /src/components/breadcrumb/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ngOfficeUiFabric | uif-Breadcrumb demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Breadcrumb Demo | <uif-breadcrumb>

21 | In order for this demo to work you must first build the library in debug mode. 22 | 23 | 24 |

To render breadcrumb, use the following markup: 25 |
26 | 

27 |       <uif-breadcrumb uif-breadcrumb-links="links"></uif-breadcrumb>
28 |
Breadcrumb elements are passed as an expression to uif-breadcrumb-links attribute. Expression should 29 | evaluate as an array of objects with following properties: 30 |
    31 |
  • href
    • 32 |
  • linkText
    • 33 |
34 | Sample array of such elements can be found below: 35 | 
36 |       $scope.links = [
37 |         {href: 'http://github1.com', linkText: 'GitHub1'},
38 |         {href: 'http://github2.com', linkText: 'GitHub2'},
39 |         {href: 'http://github3.com', linkText: 'GitHub3'},
40 |         {href: 'http://github4.com', linkText: 'GitHub4'},
41 |         {href: 'http://github5.com', linkText: 'GitHub5'},
42 |         {href: 'http://github6.com', linkText: 'GitHub6'}
43 |       ];
44 |
45 |

46 |

47 | 48 |

49 | 50 | 51 | -------------------------------------------------------------------------------- /src/components/breadcrumb/demo/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var demoApp = angular.module('demoApp', [ 4 | 'officeuifabric.core', 5 | 'officeuifabric.components.breadcrumb' 6 | ]); 7 | 8 | demoApp.controller('demoCtrl', ['$scope', function ($scope) { 9 | $scope.links = [ 10 | { href: 'http://github1.com', linkText: 'GitHub1' }, 11 | { href: 'http://github2.com', linkText: 'GitHub2' }, 12 | { href: 'http://github3.com', linkText: 'GitHub3' }, 13 | { href: 'http://github4.com', linkText: 'GitHub4' }, 14 | { href: 'http://github5.com', linkText: 'GitHub5' }, 15 | { href: 'http://github6.com', linkText: 'GitHub6' } 16 | ]; 17 | }]); 18 | -------------------------------------------------------------------------------- /src/components/breadcrumb/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 | 2 | GitHub1 3 | GitHub2 4 | GitHub3 5 | GitHub4 6 | 7 | -------------------------------------------------------------------------------- /src/components/button/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js -------------------------------------------------------------------------------- /src/components/button/buttonTemplateType.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Enum for all possible button template types not public, only use within directive. 3 | * 4 | * @readonly 5 | * @private 6 | * @enum {string} 7 | * 8 | */ 9 | export enum ButtonTemplateType { 10 | actionButton, 11 | actionLink, 12 | primaryButton, 13 | primaryLink, 14 | commandButton, 15 | commandLink, 16 | compoundButton, 17 | compoundLink, 18 | heroButton, 19 | heroLink 20 | } 21 | -------------------------------------------------------------------------------- /src/components/button/buttonTypeEnum.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Enum for all possible button types supported by Office UI Fabric. Enums in JavaScript are always indexed but this enum is 3 | * intended to be used as a striangular. 4 | * 5 | * @readonly 6 | * @enum {string} 7 | * @usage 8 | * 9 | * This is used to generate the string that you pass into the directive. Specifically, the string is passed 10 | * to the `uif-type` attribute. To evaluate the enum value as a string: 11 | * 12 | * let buttonType: string = ButtonTypeEnum[ButtonTypeEnum.primary]; 13 | */ 14 | export enum ButtonTypeEnum { 15 | primary, 16 | command, 17 | compound, 18 | hero 19 | } 20 | -------------------------------------------------------------------------------- /src/components/button/demo/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('demoApp', [ 4 | 'officeuifabric.core', 5 | 'officeuifabric.components.button' 6 | ]); 7 | -------------------------------------------------------------------------------- /src/components/button/demoActionButton/index.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem Ipsum 3 | 4 | 5 | Lorem Ipsum -------------------------------------------------------------------------------- /src/components/button/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 | Lorem Ipsum -------------------------------------------------------------------------------- /src/components/button/demoCommandButton/index.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem Ipsum 3 | 4 | 5 | Lorem Ipsum 6 | 7 | 8 | 9 | Lorem Ipsum 10 | 11 | 12 | Lorem Ipsum 13 | -------------------------------------------------------------------------------- /src/components/button/demoCompoundButton/index.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem Ipsum 3 | 4 | 5 | Lorem Ipsum 6 | 7 | 8 | 9 | Lorem Ipsum 10 | 11 | 12 | Lorem Ipsum 13 | -------------------------------------------------------------------------------- /src/components/button/demoDisabled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ngOfficeUiFabric | uif-button demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Button Demo | <uif-button>

21 | In order for this demo to work you must first build the library in debug mode. 22 | 23 |

The buttons can be disabled by checking this checkbox

24 |

25 | Disabled 26 |

27 | 28 |

Button rendering

29 |

30 | This markup:
31 | 32 | <uif-button ng-disabled="disabled">Lorem Ipsum</uif-button> 33 | 34 |

35 | 36 |

37 | Renders this:
38 | Lorem Ipsum 39 |

40 | 41 |

Link Rendering

42 |

43 | This markup:
44 | 45 | <uif-button ng-disabled="disabled">Lorem Ipsum</uif-button> 46 | 47 |

48 | 49 |

50 | Renders this:
51 | Lorem Ipsum 52 |

53 | 54 | 55 | -------------------------------------------------------------------------------- /src/components/button/demoHeroButton/index.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem Ipsum 3 | 4 | 5 | Lorem Ipsum 6 | 7 | 8 | 9 | Lorem Ipsum 10 | 11 | 12 | Lorem Ipsum 13 | -------------------------------------------------------------------------------- /src/components/button/demoPrimaryButton/index.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem Ipsum 3 | 4 | 5 | Lorem Ipsum -------------------------------------------------------------------------------- /src/components/callout/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js -------------------------------------------------------------------------------- /src/components/callout/calloutArrowEnum.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Enum for callout arrow direction. It is intended to use as string as `uif-arrow` attribute value on `uif-callout` directive. 3 | * 4 | * @readonly 5 | * @enum {string} 6 | * @usage 7 | * 8 | * This is used to generate the string that you pass into the directive. Specifically, the string is passed 9 | * to the `uif-arrow` attribute. To evaluate the enum value as a string: 10 | * 11 | * let arrow: string = CalloutArrow[CalloutArrow.left]; 12 | */ 13 | export enum CalloutArrow { 14 | left, 15 | right, 16 | top, 17 | bottom 18 | } 19 | -------------------------------------------------------------------------------- /src/components/callout/calloutTypeEnum.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Enum for callout type. It is intended to use as string as `uif-type` attribute value on `uif-callout` directive. 4 | * 5 | * @readonly 6 | * @enum {string} 7 | * @usage 8 | * 9 | * This is used to generate the string that you pass into the directive. Specifically, the string is passed 10 | * to the `uif-type` attribute. To evaluate the enum value as a string: 11 | * 12 | * let type: string = CalloutType[CalloutType.peek]; 13 | */ 14 | export enum CalloutType { 15 | oobe, 16 | peek 17 | } 18 | -------------------------------------------------------------------------------- /src/components/callout/demo/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var demoApp = angular.module('demoApp', [ 4 | 'officeuifabric.core', 5 | 'officeuifabric.components.callout' 6 | ]); 7 | 8 | demoApp.controller('calloutDemoController',['$scope', '$timeout', calloutDemoController]); 9 | 10 | function calloutDemoController($scope, $timeout){ 11 | $scope.vm = { 12 | firstVisible : false, 13 | secondVisible: false, 14 | thirdVisible: false 15 | }; 16 | 17 | $scope.toggleClick = function(){ 18 | $scope.vm.secondVisible = !$scope.vm.secondVisible; 19 | }; 20 | 21 | $scope.thirdToggleClick = function(){ 22 | $timeout(function(){ 23 | $scope.vm.thirdVisible = !($scope.vm.thirdVisible); 24 | }, 1000); 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/choicefield/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js -------------------------------------------------------------------------------- /src/components/choicefield/choicefieldTypeEnum.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @ngdoc enum 3 | * @name choicefieldType 4 | * @module officeuifabric.components.choicefield 5 | * 6 | * @readonly 7 | * 8 | * @description 9 | * This attribute can be set on the uif-choicefield-option directive and determines whether it 10 | * is a radio button or a checkbox 11 | */ 12 | export enum ChoicefieldType { 13 | radio, 14 | checkbox 15 | } 16 | -------------------------------------------------------------------------------- /src/components/choicefield/demo/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var demoApp = angular.module('demoApp', [ 4 | 'officeuifabric.core', 5 | 'officeuifabric.components.choicefield' 6 | ]); 7 | 8 | demoApp.controller('demoController', [ 9 | '$scope', function ($scope) { 10 | $scope.selectedValue2 = ''; 11 | $scope.changed = false; 12 | $scope.change = function () { 13 | $scope.changed = true; 14 | }; 15 | 16 | $scope.choiceFieldType = 'radio'; 17 | $scope.switchToRadio = function () { 18 | $scope.choiceFieldType = 'radio'; 19 | }; 20 | $scope.switchToCheckbox = function () { 21 | $scope.choiceFieldType = 'checkbox'; 22 | }; 23 | }]); 24 | 25 | -------------------------------------------------------------------------------- /src/components/choicefield/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Text 1 4 | Text 2 5 | Text 3 6 | Text 4 7 | 8 | 9 | 10 | 11 | 12 | Option 1 -------------------------------------------------------------------------------- /src/components/choicefield/demoDisabled/index.html: -------------------------------------------------------------------------------- 1 | 2 | Text 1 3 | Text 2 4 | Text 3 5 | Text 4 6 | -------------------------------------------------------------------------------- /src/components/choicefield/dirtyDemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Dirty Checking with ngOfficeUiFabric directives

13 | 14 |
15 | 16 | 17 | 18 | Text 1 19 | Text 2 20 | Text 3 21 | Text 4 22 | 23 | 24 | 
 {{ dirtyForm | json }}
25 | 26 |
27 | 28 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/commandbar/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js -------------------------------------------------------------------------------- /src/components/content/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js -------------------------------------------------------------------------------- /src/components/content/contentDirective.spec.ts: -------------------------------------------------------------------------------- 1 | import * as angular from 'angular'; 2 | 3 | describe('content: ', () => { 4 | beforeEach(() => { 5 | angular.mock.module('officeuifabric.core'); 6 | angular.mock.module('officeuifabric.components.content'); 7 | }); 8 | 9 | describe('regular content tests', () => { 10 | let $element: JQuery; 11 | let $scope: any; 12 | 13 | beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function) => { 14 | $element = angular.element(`Item`); 15 | $scope = $rootScope; 16 | $compile($element)($scope); 17 | $element = jQuery($element[0]); 18 | $scope.$apply(); 19 | })); 20 | 21 | it('should have valid class', inject(($compile: Function, $rootScope: angular.IRootScopeService) => { 22 | expect($element).toHaveClass('uif-content'); 23 | })); 24 | 25 | it('should render icon inside', inject(($compile: Function, $rootScope: angular.IRootScopeService) => { 26 | let icon: JQuery = $element.find('.ms-Icon'); 27 | expect(icon.length).toEqual(1); 28 | })); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /src/components/content/contentDirective.ts: -------------------------------------------------------------------------------- 1 | import * as angular from 'angular'; 2 | 3 | /** 4 | * @ngdoc directive 5 | * @name uifContent 6 | * @module officeuifabric.components.content 7 | * 8 | * @restrict E 9 | * 10 | * @description 11 | * `` is a helper directive used by other direcitves (for example contextual menu, navbar). 12 | * 13 | * @usage 14 | * 15 | * 16 | * Item 17 | * 18 | * 19 | */ 20 | export class ContentDirective implements angular.IDirective { 21 | public static directiveName: string = 'uifContent'; 22 | 23 | public replace: boolean = true; 24 | public restrict: string = 'E'; 25 | public transclude: boolean = true; 26 | public scope: boolean = true; 27 | public template: string = ``; 28 | 29 | public static factory(): angular.IDirectiveFactory { 30 | const directive: angular.IDirectiveFactory = () => new ContentDirective(); 31 | return directive; 32 | } 33 | } 34 | 35 | /** 36 | * @ngdoc module 37 | * @name officeuifabric.components.content 38 | * 39 | * @description 40 | * Content Module 41 | * 42 | */ 43 | export let module: angular.IModule = angular.module('officeuifabric.components.content', [ 44 | 'officeuifabric.components']) 45 | .directive(ContentDirective.directiveName, ContentDirective.factory()); 46 | -------------------------------------------------------------------------------- /src/components/content/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ngOfficeUiFabric | uif-content demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Content Demo | <uif-content>

23 | In order for this demo to work you must first build the library in debug mode. 24 |
25 |
26 |

Renders all which is inside <uif-content />:

27 | 28 |

Code:

29 | 30 |
31 | 32 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /src/components/content/demo/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('demoApp', [ 4 | 'officeuifabric.core', 5 | 'officeuifabric.components.content' 6 | ]); 7 | -------------------------------------------------------------------------------- /src/components/content/demo/styles.css: -------------------------------------------------------------------------------- 1 | .code { 2 | margin: -20px 0 -20px -40px; 3 | } -------------------------------------------------------------------------------- /src/components/content/demoBasicUsage/index.html: -------------------------------------------------------------------------------- 1 | 2 | Item being rendered 3 | 4 | -------------------------------------------------------------------------------- /src/components/contextualmenu/.gitignore: -------------------------------------------------------------------------------- 1 | !demo/index.js 2 | !demoBasicUsage/*.js -------------------------------------------------------------------------------- /src/components/contextualmenu/demo/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular.module('demo', [ 5 | 'officeuifabric.core', 6 | 'officeuifabric.components.contextualmenu', 7 | 'ngSanitize' 8 | ]) 9 | .directive('raw', ['$sce', function ($sce) { 10 | var directive = { 11 | replace: true, 12 | scope: { 13 | src: '=' 14 | }, 15 | template: '
',
16 |         restrict: 'E',
17 |         link: function (scope, element) {
18 |           var template = angular.element(document.getElementById(scope.src));
19 |           scope.data = $sce.trustAsHtml(element.text(template.html()).html());
20 |         }
21 |       };
22 | 
23 |       return directive;
24 |     }]);
25 | 
26 |   angular.module('regularSample', ['demo'])
27 |     .controller('demoController',
28 |     ['$scope', function ($scope) {
29 |       $scope.isOpen = true;
30 |       $scope.dynamic = {};
31 |       $scope.dynamic.opened = false;
32 |       $scope.toggleMenu = function () {
33 |         $scope.dynamic.opened = !$scope.dynamic.opened;
34 |       };
35 |       $scope.colors = ['Green', 'Yellow', 'Red', 'White', 'Blue'];
36 | 
37 |       $scope.logColor = function (color) {
38 |         console.log(color);
39 |       };
40 | 
41 |       $scope.logClick = function (logData) {
42 |         console.log(logData);
43 |       };
44 |     }]);
45 | 
46 |   angular.module('animateSample', [
47 |     'ngAnimate',
48 |     'demo'
49 |   ])
50 |     .controller('demoController',
51 |     ['$scope', function ($scope) {
52 |       $scope.isOpen = true;
53 | 
54 |       $scope.logClick = function (logData) {
55 |         console.log(logData);
56 |       };
57 |     }]);
58 | })();
59 | 
60 | angular.element(document).ready(function () {
61 |   angular.bootstrap(document.getElementById('regularSample'), ['regularSample']);
62 |   angular.bootstrap(document.getElementById('animateSample'), ['animateSample']);
63 | });
64 | 


--------------------------------------------------------------------------------
/src/components/contextualmenu/demo/styles.css:
--------------------------------------------------------------------------------
 1 | .ms-ContextualMenu.is-open {
 2 |     position: relative;
 3 | }
 4 | 
 5 | .dynamic-menu .ms-ContextualMenu.is-open {
 6 |   position: absolute;
 7 | }
 8 | 
 9 | .code {
10 |   margin: -20px 0 -20px -40px;
11 | }
12 | 
13 | .is-open-add{
14 |     animation: 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) fadeIn, slideRightIn40;
15 |     -webkit-animation: 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) fadeIn, slideRightIn40;
16 |     -webkit-animation-fill-mode: both;
17 |     animation-fill-mode: both;
18 | }
19 | 
20 | .is-open-remove{
21 |     animation: 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9) fadeOut, scaleDown98;
22 |     -webkit-animation: 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9) fadeOut, scaleDown98;
23 |     -webkit-animation-fill-mode: both;
24 |     animation-fill-mode: both;
25 | 
26 |     box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
27 |     background-color: #fff;
28 |     border: 1px solid #c8c8c8;
29 |     display: block;
30 |     list-style-type: none;
31 |     position: relative;
32 |     width: 180px;
33 |     z-index: 105;
34 | }
35 | 
36 | @-webkit-keyframes fadeIn {
37 |   from {
38 |     opacity: 0;
39 |     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
40 |   }
41 | 
42 |   to {
43 |     opacity: 1;
44 |   }
45 | }
46 | 
47 | @-webkit-keyframes fadeOut {
48 |   from {
49 |     opacity: 1;
50 |     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
51 |   }
52 | 
53 |   to {
54 |     opacity: 0;
55 |   }
56 | }
57 | 
58 | @-webkit-keyframes slideRightIn40 {
59 |   from {
60 |     transform: translate3d(-40px, 0px, 0px);
61 |   }
62 | 
63 |   to {
64 |     transform: translate3d(0px, 0px, 0px);
65 |   }
66 | }
67 | 
68 | @-webkit-keyframes scaleDown98 {
69 |   from {
70 |     transform: scale3d(1, 1, 1);
71 |   }
72 | 
73 |   to {
74 |     transform: scale3d(0.98, 0.98, 1);
75 |   }
76 | }


--------------------------------------------------------------------------------
/src/components/contextualmenu/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 
2 | 	
3 | 


--------------------------------------------------------------------------------
/src/components/contextualmenu/demoBasicUsage/scripts.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |   'use strict';
 3 | 
 4 |   var demoApp = angular.module('demoApp', [
 5 |     'officeuifabric.core',
 6 |     'officeuifabric.components.contextualmenu'
 7 |   ]);
 8 | 
 9 |   demoApp.controller('demoController', [
10 |     '$scope', demoController]);
11 | 
12 |   function demoController($scope) {
13 |     $scope.isOpen = true;
14 |     $scope.colors = ['Green', 'Yellow', 'Red', 'White', 'Blue'];
15 | 
16 |     $scope.logColor = function (color) {
17 |       console.log(color);
18 |     };
19 |   }
20 | })();
21 | 


--------------------------------------------------------------------------------
/src/components/datepicker/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/datepicker/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.datepicker'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {
12 |   $scope.value = new Date(2016, 3, 2);
13 |   $scope.vvv = 'XXX';
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/datepicker/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/datepicker/dirtyDemo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   
 7 |   
 8 |     
 9 |   
10 |   
11 |   
12 |   
13 |   
14 | 
15 | 
16 | 
17 |   
Dirty Checking with ngOfficeUiFabric directives

18 | 
19 | 
20 |   

21 | 
22 |     
23 | 
24 |     
25 | 
26 |     
 {{ dirtyForm | json }}

27 | 
28 |   

29 | 
30 | 
31 | 
32 |   
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/src/components/dialog/.gitignore:
--------------------------------------------------------------------------------
1 | !demo*/*.js


--------------------------------------------------------------------------------
/src/components/dialog/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |     ngOfficeUiFabric | uif-Dialog demo
 6 |     
 7 | 
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     
16 | 
17 | 
18 | 
19 | 
20 |     
Dialog Demo | <uif-dialog>

21 |     In order for this demo to work you must first build the library in debug mode.
22 | 
23 |     

24 |         This markup:
25 |         

26 |         
27 |             <uif-dialog  />
28 |         
29 |     

30 | 
31 | 
32 |     Renders this:
33 |     

34 |    
35 |     
36 |         
37 |             

38 |                 Create account
39 |             

40 |         
41 |         
42 |             
43 |                 
44 |                     Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
45 |                     asdasda
46 |                      
47 |                 
48 |                 
49 |                     Text 1
50 |                     Text 2
51 |                     Text 3
52 |                     Text 4
53 |                 
54 |                 
55 |             
56 |             
57 |                     
60 |                 
61 |         
62 |     
63 | 
64 | 
65 | 
66 | 


--------------------------------------------------------------------------------
/src/components/dialog/demo/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | angular.module('demoApp', [
4 |   'officeuifabric.core',
5 |   'officeuifabric.components.dialog'
6 | ]);
7 | 


--------------------------------------------------------------------------------
/src/components/dialog/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/src/components/dialog/demoBasicUsage/index.html


--------------------------------------------------------------------------------
/src/components/dialog/dialogEnums.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enumeration of the different dialog types supported by the dialog directive.
 3 |  *
 4 |  * @readonly
 5 |  * @enum {string}
 6 |  * @usage
 7 |  *
 8 |  * This enumeration is used to specify the type of dialog generated.
 9 |  */
10 | export enum DialogTypeEnum {
11 |   none,
12 |   header,
13 |   multiline
14 | }
15 | 
16 | /**
17 |  * Enumeration of the different dialog action alignment types supported by the dialog directive.
18 |  *
19 |  * @readonly
20 |  * @enum {string}
21 |  * @usage
22 |  *
23 |  * This enumeration is used to specify the alignment of action button inside  element
24 |  */
25 | export enum DialogActionsPositionEnum {
26 |   none,
27 |   left,
28 |   right
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/dropdown/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/dropdown/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Dropdown demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 | 
20 |     
Dropdown Demo | <uif-dropdown>
 
21 |     In order for this demo to work you must first build the library in debug mode.
22 | 
23 |     
Basic usage

24 |     

25 |         This markup: 

26 |         
27 |         <uif-dropdown ng-model="value">
28 |             <uif-dropdown-option value="{{key}}" ng-repeat="(key, value) in values" title="{{value}}">{{value}}</uif-dropdown-option>
29 |         </uif-dropdown>
30 |         

31 |     

32 | 
33 |     

34 |         Renders this:
35 |         

36 |         
37 |             {{value}}
38 |         
39 |         Value: {{value}}
40 |     

41 |   
42 |   
43 |     
Disabled usage

44 |     

45 |         This markup: 

46 |         
47 |             <uif-dropdown ng-model="dropdownValue" ng-disabled="disabled">
                <uif-dropdown-option value="value1">Value 1</uif-dropdown-option>
                <uif-dropdown-option value="value2">Value 2</uif-dropdown-option>
                <uif-dropdown-option value="value3">Value 3</uif-dropdown-option>
                <uif-dropdown-option value="value4">Value 4</uif-dropdown-option>
            </uif-dropdown>
48 |         

49 |     

50 | 
51 |     

52 |         Renders this:
53 |         

54 |         
55 |             Value 1
56 |             Value 2
57 |             Value 3
58 |             Value 4
59 |         
60 | 
61 |     

62 |     

63 |         Disabled

64 |         dropdownValue: {{dropdownValue}}
65 |         
66 |         
67 |     

68 | 
69 | 
70 | 


--------------------------------------------------------------------------------
/src/components/dropdown/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.dropdown'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {
12 |   $scope.values = {
13 |     'round': 'Round',
14 |     'square': 'Square'
15 |   };
16 |   $scope.value = 'round';
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/dropdown/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 
2 |     Value 1
3 |     Value 2
4 |     Value 3
5 |     Value 4
6 | 


--------------------------------------------------------------------------------
/src/components/dropdown/demoDisabled/index.html:
--------------------------------------------------------------------------------
1 | 
2 |     Value 1
3 |     Value 2
4 |     Value 3
5 |     Value 4
6 | 


--------------------------------------------------------------------------------
/src/components/dropdown/dirtyDemo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   
 7 |   
 8 |   
 9 | 
10 | 
11 | 
12 | 

13 | 
14 |     
15 | 
16 |     
17 |       Value 1
18 |       Value 2
19 |       Value 3
20 |       Value 4
21 |     
22 | 
23 |     
 {{ dirtyForm | json }}

24 | 
25 |   

26 | 
27 |   
37 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/src/components/facepile/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js
2 | !demo/people.js
3 | 


--------------------------------------------------------------------------------
/src/components/facepile/demo/Persona.Person2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/src/components/facepile/demo/Persona.Person2.png


--------------------------------------------------------------------------------
/src/components/facepile/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uifFacepile demo
 6 |   
 7 |   
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 |   
17 | 
18 | 
19 | 
20 | 
21 | 
22 |     
uifFacepile Demo | <uif-facepile>

23 |     In order for this demo to work you must first build the library in dev mode. (gulp build-lib dev)
24 | 
25 |     
Basic Usage

26 |     
27 |     
Code:

28 |     
29 | 
30 |     
33 | 
34 |     
With People Picker

35 |     
36 |     
Code:

37 |     
38 | 
39 |     
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/src/components/facepile/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.facepile'
 6 | ])
 7 |   .directive('raw', ['$sce', function ($sce) {
 8 |     var directive = {
 9 |       replace: true,
10 |       scope: {
11 |         src: '='
12 |       },
13 |       template: '
',
14 |       restrict: 'E',
15 |       link: function (scope, element) {
16 |         var template = angular.element(document.getElementById(scope.src));
17 |         scope.data = $sce.trustAsHtml(element.text(template.html()).html());
18 |       }
19 |     };
20 | 
21 |     return directive;
22 |   }]);
23 | 
24 | 
25 | demoApp.controller('demoAppController', [
26 |   '$scope', demoAppController]);
27 | 
28 | function demoAppController($scope) {
29 | 
30 |   var defaultPeople = JSON.parse(JSON.stringify(window.demo.people));
31 |   var membersList = JSON.parse(JSON.stringify(window.demo.membersList));
32 |   var peoplePickerList = JSON.parse(JSON.stringify(window.demo.membersList));
33 | 
34 |   $scope.BasicMembers = membersList;
35 |   $scope.PeoplePickerMembers = peoplePickerList;
36 | 
37 |   $scope.onFacePileSearch = function () {
38 |     return defaultPeople;
39 |   };
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/icon/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js
2 | !demoTypeScriptUsage/bundle.js
3 | !demoTypeScriptUsage/webpack.config.js


--------------------------------------------------------------------------------
/src/components/icon/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Icon demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 | 
20 |   
Icon Demo | <uif-icon>

21 |   In order for this demo to work you must first build the library in debug mode.
22 | 
23 |   

24 |     Use the attribute uif-type to specify the icon to display. This must be one of the icons listed on the page: Office UI Fabric - Sytles - Icons.
25 |   

26 | 
27 |   

28 |     This markup: 

29 |     
30 |       <uif-icon uif-type="arrowDownLeft"></uif-icon>
31 |     
32 |   

33 | 
34 |   

35 |     Renders this:
36 |     

37 |     
38 |   

39 | 
40 |   
Modifiers

41 |   

42 |     Change the size & color using standard CSS sizing techniques: style="font-size:32px; color:red;":

43 |     
44 |   

45 | 
46 |   
Changing the Icon

47 |   

48 |     
51 | 
52 |     

53 |       Selected icon = {{selectedIcon}}

54 |       Rendered icon = 
55 |     

56 |   

57 | 
58 |   
Errors When Unsupported Icons Specified

59 |   

60 |     Wouldn't you like to see an error when you specify an icon that's not supported? Open the JavaScript console to see an error for an icon like this: 

61 | 
62 |     
63 |       <uif-icon uif-type="ngOfficeUiFabric"></uif-icon>
64 |     
65 | 
66 |     
67 |   

68 | 
69 |   
Dynamically change type

70 |   

71 |     

72 |       This markup: 

73 |       
74 |         <uif-icon uif-type="{{iconType}}"></uif-icon>
75 |       
76 |     

77 | 
78 |     

79 |       
Renders this:
80 |       

81 |       icon type: {{iconType}}: 
82 |       
 
83 |        
84 |       
85 |     

86 |   

87 | 
88 | 
89 | 
90 | 
91 | 


--------------------------------------------------------------------------------
/src/components/icon/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.icon'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {
12 |   $scope.icons = [
13 |     { id: 'arrowDownLeft', name: 'arrow down left' },
14 |     { id: 'circleEmpty', name: 'circle empty' },
15 |     { id: 'circleFill', name: 'circle fill' },
16 |     { id: 'plus', name: 'plus' },
17 |     { id: 'minus', name: 'minus' },
18 |     { id: 'question', name: 'question' }
19 |   ];
20 |   $scope.selectedIcon = $scope.icons[3];
21 | 
22 |   $scope.iconType = 'arrowLeft';
23 |   $scope.switchToArrowLeft = function () {
24 |     $scope.iconType = 'arrowLeft';
25 |   };
26 |   $scope.switchToArrowRight = function () {
27 |     $scope.iconType = 'arrowRight';
28 |   };
29 |   $scope.switchToArrowFake = function () {
30 |     $scope.iconType = 'fake';
31 |   };
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/icon/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/icon/demoTypeScriptUsage/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Icon demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 | 
20 |   
Icon Demo | <uif-icon>
 
21 | 
22 |   

23 |     This demo shows how to build an Angular app with TypeScript using the provided icon enum. This option makes sure you are only using Office UI Fabric supported icons.
24 |   

25 |   

26 |     The included icon enum is not intended to be passed directly to the directive's uif-type attribute, rather it should be used to create the string. Refer to the index.ts file in this demo to see usage.
27 |   

28 |   
29 |   

30 |     The TypeScript in this demo uses external modules & this needs a module loader. The ngOfficeUiFabric uses webpack, so we'll use that in this demo as well. We took the index.ts and compile it using webpack to a bundle index.js.
31 |   

32 |   

33 |     After building the library...

34 |     gulp build-lib --debug


35 |     
36 |     Use webpack bundle was created using the following command, run from within the same folder as the demo. It uses the webpack.config.js for all settings:

37 |     webpack
38 |   

39 |   
40 |   
Changing the Icon

41 |   

42 |     
45 |     
46 |     

47 |       Selected icon = {{controller.selectedIcon}}

48 |       Rendered icon = 
49 |     

50 |   

51 | 
52 | 
53 | 
54 | 


--------------------------------------------------------------------------------
/src/components/icon/demoTypeScriptUsage/index.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import { IconEnum } from './../iconEnum';
 3 | 
 4 | export class DemoController {
 5 |   public icons: string[] = [];
 6 |   public selectedIcon: any = {};
 7 | 
 8 |   constructor() {
 9 |     // set the collection
10 |     this.icons = this._fillIconCollection();
11 |     // pick one
12 |     this.selectedIcon = this.icons[3];
13 |   };
14 | 
15 |   /**
16 |    * @description
17 |    * Populates the icon collection using the provided enum.
18 |    *
19 |    * @returns {string[]}  - Array of icons as strings.
20 |    */
21 |   private _fillIconCollection(): string[] {
22 |     let icons: string[] = [];
23 | 
24 |     // fill with real options
25 |     icons.push(IconEnum[IconEnum.arrowDownLeft]);
26 |     icons.push(IconEnum[IconEnum.circleEmpty]);
27 |     icons.push(IconEnum[IconEnum.circleFill]);
28 |     icons.push(IconEnum[IconEnum.plus]);
29 |     icons.push(IconEnum[IconEnum.minus]);
30 |     icons.push(IconEnum[IconEnum.question]);
31 | 
32 |     // add one fake option... this should be a real icon tho!!! :)
33 |     icons.push('ngOfficeUiFabric');
34 | 
35 |     return icons;
36 |   };
37 | }
38 | 
39 | export var module: angular.IModule = angular.module('demoApp', [
40 |   'officeuifabric.core',
41 |   'officeuifabric.components.icon'])
42 |   .controller('demoController', [DemoController]);
43 | 


--------------------------------------------------------------------------------
/src/components/icon/demoTypeScriptUsage/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: './index.ts',
 3 |   output: {
 4 |     filename: 'bundle.js'
 5 |   },
 6 |   externals: {
 7 |     'angular': 'angular'
 8 |   },
 9 |   module: {
10 |     target: 'web',
11 |     loaders: [
12 |       {
13 |         test: /\.ts$/,
14 |         loader: 'ts-loader'
15 |       }
16 |     ]
17 |   },
18 |   resolve: {
19 |     extensions: ['', '.js', '.ts']
20 |   }
21 | }


--------------------------------------------------------------------------------
/src/components/icon/iconDirective.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import { IconEnum } from './iconEnum';
 3 | 
 4 | /**
 5 |  * @ngdoc interface
 6 |  * @name IIconScope
 7 |  * @module officeuifabric.components.contextualmenu
 8 |  *
 9 |  * @description
10 |  * This is the scope used by the `` directive.
11 |  *
12 |  * @property {string} uifType - Icon to display. Possible types are defined in {@link IconEnum}.
13 |  */
14 | export interface IIconScope extends angular.IScope {
15 |   uifType: string;
16 | }
17 | 
18 | /**
19 |  * @controller
20 |  * @name IconController
21 |  * @private
22 |  * @description
23 |  * Used to more easily inject the Angular $log service into the directive.
24 |  */
25 | class IconController {
26 |   public static $inject: string[] = ['$log'];
27 |   constructor(public $log: angular.ILogService) {
28 |   }
29 | }
30 | 
31 | /**
32 |  * @ngdoc directive
33 |  * @name uifIcon
34 |  * @module officeuifabric.components.icon
35 |  *
36 |  * @restrict E
37 |  *
38 |  * @description
39 |  * `` is an icon directive.
40 |  *
41 |  * @see {link http://dev.office.com/fabric/styles}
42 |  *
43 |  * @usage
44 |  *
45 |  * 
46 |  */
47 | export class IconDirective implements angular.IDirective {
48 | 
49 |   public restrict: string = 'E';
50 |   public template: string = '';
51 |   public scope: {} = {
52 |     uifType: '@'
53 |   };
54 |   public transclude: boolean = true;
55 |   public controller: any = IconController;
56 |   public controllerAs: string = 'icon';
57 | 
58 |   public static factory(): angular.IDirectiveFactory {
59 |     const directive: angular.IDirectiveFactory = () => new IconDirective();
60 |     return directive;
61 |   }
62 | 
63 |   public link(scope: IIconScope, instanceElement: angular.IAugmentedJQuery, attrs: angular.IAttributes, controller: IconController): void {
64 |     // add watcher
65 |     scope.$watch('uifType', (newValue: string, oldValue: string) => {
66 |       // verify a valid icon was passed in
67 |       if (IconEnum[newValue] === undefined) {
68 |         controller.$log.error('Error [ngOfficeUiFabric] officeuifabric.components.icon - Unsupported icon: ' +
69 |           'The icon (\'' + scope.uifType + '\') is not supported by the Office UI Fabric. ' +
70 |           'Supported options are listed here: ' +
71 |           'https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/icon/iconEnum.ts');
72 |       }
73 |     });
74 |   }
75 | }
76 | 
77 | /**
78 |  * @ngdoc module
79 |  * @name officeuifabric.components.icon
80 |  *
81 |  * @description
82 |  * Icon
83 |  *
84 |  */
85 | export let module: angular.IModule = angular.module('officeuifabric.components.icon', [
86 |   'officeuifabric.components'
87 | ])
88 |   .directive('uifIcon', IconDirective.factory());
89 | 


--------------------------------------------------------------------------------
/src/components/label/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/label/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |     ngOfficeUiFabric | uif-Label demo
 6 |     
 7 | 
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     
16 |   
17 | 
18 |   
19 |     
Label Demo | <uif-label>

20 |     In order for this demo to work you must first build the library in debug mode.
21 | 
22 |     
23 |     
To render label, use the following markup:
24 |       

25 |       
26 | <uif-label>Name</uif-label>
27 |       

28 |     

29 | 
30 |     

31 |       Name
32 |     

33 | 
34 |     
35 |     

36 |       Following markup will render required label:
37 |       

38 |       
39 | <uif-label required>Name</uif-label>
40 |       

41 |     

42 | 
43 |     

44 |       Name
45 |     

46 |   
47 |     

48 |       This markup will render disabled label:
49 |       

50 |       
51 | <uif-label disabled>Name</uif-label>
52 |       

53 |     

54 | 
55 |     

56 |       Name
57 |     

58 |   
59 | 


--------------------------------------------------------------------------------
/src/components/label/demo/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | angular.module('demoApp', [
4 |   'officeuifabric.core',
5 |   'officeuifabric.components.label'
6 | ]);
7 | 


--------------------------------------------------------------------------------
/src/components/label/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 
2 | Name
3 | 
4 | 
5 | Name
6 | 
7 | 
8 | Name


--------------------------------------------------------------------------------
/src/components/label/labelDirective.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | 
 3 | /**
 4 |  * @ngdoc interface
 5 |  * @name ILabelAttributes
 6 |  * @module officeuifabric.components.label
 7 |  *
 8 |  * @description
 9 |  * Those are the attributes that can be used on label directive.
10 |  *
11 |  *
12 |  * @property {string} disabled - If set, renders disabled label.
13 |  * @property {string} required - If set, renders required label.
14 |  */
15 | interface ILabelAttributes extends angular.IAttributes {
16 |   disabled: string;
17 |   required: string;
18 | }
19 | 
20 | /**
21 |  * @ngdoc directive
22 |  * @name uifLabel
23 |  * @module officeuifabric.components.label
24 |  *
25 |  * @restrict E
26 |  *
27 |  * @description
28 |  * `` is and directive for rendering label component.
29 |  * @see https://github.com/OfficeDev/Office-UI-Fabric/tree/master/src/components/Label
30 |  *
31 |  * @usage
32 |  *
33 |  * Name
34 |  */
35 | export class LabelDirective implements angular.IDirective {
36 |   public restrict: string = 'E';
37 |   public transclude: boolean = true;
38 |   public replace: boolean = false;
39 |   public scope: {} = {
40 |     ngRequired: '';
43 | 
44 |   public static factory(): angular.IDirectiveFactory {
45 |     const directive: angular.IDirectiveFactory = () => new LabelDirective();
46 |     return directive;
47 |   }
48 | 
49 |   public link(scope: angular.IScope, instanceElement: angular.IAugmentedJQuery, attributes: ILabelAttributes): void {
50 |     let label: JQuery = instanceElement.find('label').eq(0);
51 | 
52 |     if (angular.isDefined(attributes.disabled)) {
53 |       label.addClass('is-disabled');
54 |     }
55 | 
56 |     if (angular.isDefined(attributes.required)) {
57 |       label.addClass('is-required');
58 |     }
59 | 
60 |     // add ng-required watcher
61 |     scope.$watch('ngRequired', (newValue: string, oldValue: string) => {
62 |       if (newValue) {
63 |         label.addClass('is-required');
64 |       } else if (newValue !== undefined && !newValue) {
65 |         label.removeClass('is-required');
66 |       }
67 |     });
68 |   }
69 | }
70 | 
71 | /**
72 |  * @ngdoc module
73 |  * @name officeuifabric.components.label
74 |  *
75 |  * @description
76 |  * Label
77 |  */
78 | export let module: angular.IModule = angular.module('officeuifabric.components.label', ['officeuifabric.components'])
79 |   .directive('uifLabel', LabelDirective.factory());
80 | 


--------------------------------------------------------------------------------
/src/components/link/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/link/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |     ngOfficeUiFabric | uif-link demo
 6 |     
 7 | 
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     
16 | 
17 | 
18 | 
19 | 
20 |     
Link Demo | <uif-link>

21 |     In order for this demo to work you must first build the library in debug mode.
22 | 
23 |     

24 |         Use the built in Angular directive ng-href to set the url.
25 |     

26 | 
27 |     

28 |         This markup:
29 |         

30 |         
31 |       <uif-link ng-href="http://ngofficeuifabric.com/">Some link text here</uif-link>
32 |         
33 |     

34 | 
35 |     

36 |         Renders this:
37 |         

38 |         Some link text here
39 |     

40 | 
41 | 
42 | 
43 | 
44 | 


--------------------------------------------------------------------------------
/src/components/link/demo/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | angular.module('demoApp', [
4 |   'officeuifabric.core',
5 |   'officeuifabric.components.link'
6 | ]);
7 | 
8 | 


--------------------------------------------------------------------------------
/src/components/link/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | Your link text here


--------------------------------------------------------------------------------
/src/components/link/linkDirective.spec.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | 
 3 | describe('linkDirective: ', () => {
 4 |   let element: JQuery;
 5 |   let scope: angular.IScope;
 6 | 
 7 |   beforeEach(() => {
 8 |     angular.mock.module('officeuifabric.core');
 9 |     angular.mock.module('officeuifabric.components.link');
10 |   });
11 | 
12 |   beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function) => {
13 |     element = angular.element('Link Text');
14 |     scope = $rootScope;
15 |     $compile(element)(scope);
16 |     scope.$digest();
17 |     element = jQuery(element[0]);
18 |   }));
19 | 
20 | 
21 |   it('should render as an ', () => {
22 | 
23 |     let aElement: JQuery = element;
24 | 
25 |     expect(aElement.eq(0).prop('tagName')).toBe('A');
26 | 
27 |   });
28 | 
29 | 
30 |   it('should have an href attribute', () => {
31 | 
32 |     let aElement: JQuery = element;
33 | 
34 |     expect(aElement).toHaveAttr('href');
35 | 
36 |   });
37 | 
38 | 
39 |   it('should render correct Office UI Fabric CSS classes', () => {
40 | 
41 |     let aElement: JQuery = element;
42 | 
43 |     // ensure link has the correct classes
44 |     expect(aElement.eq(0)).toHaveClass('ms-Link');
45 | 
46 |   });
47 | 
48 | 
49 |   it('should render the correct text', () => {
50 | 
51 |     let aElement: JQuery = element;
52 | 
53 |     // make sure it has the correct text
54 |     expect(aElement.eq(0)).toHaveText('Link Text');
55 | 
56 |   });
57 | 
58 | });
59 | 


--------------------------------------------------------------------------------
/src/components/link/linkDirective.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | 
 3 | /**
 4 |  * @ngdoc directive
 5 |  * @name uifLink
 6 |  * @module officeuifabric.components.link
 7 |  *
 8 |  * @restrict E
 9 |  *
10 |  * @description
11 |  * `` is a link directive.
12 |  *
13 |  * @param {string=} ng-href the url
14 |  *
15 |  *
16 |  * @see {link http://dev.office.com/fabric/components/link}
17 |  *
18 |  * @usage
19 |  *
20 |  * Link text
21 |  */
22 | export class LinkDirective implements angular.IDirective {
23 | 
24 |   public restrict: string = 'E';
25 |   public template: string = '';
26 |   public scope: {} = {
27 |     ngHref: '@'
28 |   };
29 | 
30 |   public transclude: boolean = true;
31 |   public replace: boolean = true;
32 | 
33 |   public static factory(): angular.IDirectiveFactory {
34 |     const directive: angular.IDirectiveFactory = () => new LinkDirective();
35 |     return directive;
36 |   }
37 | }
38 | 
39 | /**
40 |  * @ngdoc module
41 |  * @name officeuifabric.components.link
42 |  *
43 |  * @description
44 |  * Link
45 |  *
46 |  */
47 | export let module: angular.IModule = angular.module('officeuifabric.components.link', [
48 |   'officeuifabric.components'
49 | ])
50 |   .directive('uifLink', LinkDirective.factory());
51 | 


--------------------------------------------------------------------------------
/src/components/list/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/list/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 |     {{message.sender.name}}
 4 |     {{message.title}}
 5 |     {{message.description}}
 6 |     {{message.time | date : 'shortTime'}}
 7 |     
 8 |       
 9 |         
10 |       
11 |       
12 |         
13 |       
14 |       
15 |         
16 |       
17 |     
18 |   
19 | 


--------------------------------------------------------------------------------
/src/components/list/listItemSelectModeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enumeration of the different list item selection modes supported by the list directive.
 3 |  *
 4 |  * @readonly
 5 |  * @enum {string}
 6 |  * @usage
 7 |  *
 8 |  * This enumeration is used to specify which list item selection mode the list should use.
 9 |  */
10 | export enum ListItemSelectModeEnum {
11 |   none,
12 |   single,
13 |   multiple
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/list/listItemTypeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enumeration of the different list item types that determine how the item is rendered.
 3 |  *
 4 |  * @readonly
 5 |  * @enum {string}
 6 |  * @usage
 7 |  *
 8 |  * This enumeration is used to specify how a list item should be rendered.
 9 |  */
10 | export enum ListItemTypeEnum {
11 |   item,
12 |   itemWithImage,
13 |   itemWithIcon
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/list/listLayoutEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enumeration of the different ways in which the list can be rendered.
 3 |  *
 4 |  * @readonly
 5 |  * @enum {string}
 6 |  * @usage
 7 |  *
 8 |  * This enumeration is used to specify how a list should be rendered.
 9 |  */
10 | export enum ListLayoutEnum {
11 |   list,
12 |   grid
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/messagebanner/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/messagebanner/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |     ngOfficeUiFabric | uif-message-banner demo
 6 |     
 7 | 
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     
16 | 
17 | 
18 | 
19 |     
Message Banner Demo | <uif-message-banner>

20 |     In order for this demo to work you must first build the library in debug mode.
21 | 
22 |     
uif-content demo

23 |     Show/hide
24 |     
25 |     
To render message banner, use the following markup:
26 |         

27 |         
28 |         <uif-message-banner uif-is-visible="vm.bannerToggle" uif-action-label="{{vm.label}}" uif-action="customFunction()" uif-on-close="customCloseFunction()">
29 |             <uif-content>
30 |                 <b>Some formatted content</b> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
31 |                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
32 |                 duo dolores et ea rebum.
33 |             </uif-content>
34 |         </uif-message-banner>
35 |         
36 |     

37 |     

38 |         
39 |             
40 |                 Some formatted content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
41 |                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
42 |                 duo dolores et ea rebum.
43 |             
44 |         
45 |     

46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/src/components/messagebanner/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.messagebanner'
 6 | ]);
 7 | 
 8 | demoApp.controller('messageBannerDemoController', ['$scope', messageBannerDemoController]);
 9 | 
10 | function messageBannerDemoController($scope) {
11 |   $scope.customFunction = function () {
12 |     alert('this is a test message');
13 |   };
14 | 
15 |   $scope.customCloseFunction = function () {
16 |     alert('message banner closed');
17 |   };
18 | 
19 |   $scope.vm = {
20 |     bannerToggle: true,
21 |     label: 'test button'
22 |   };
23 | }
24 | 
25 | 


--------------------------------------------------------------------------------
/src/components/messagebar/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/messagebar/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |     ngOfficeUiFabric | uif-message-bar demo
 6 |     
 7 | 
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     
16 | 
17 | 
18 | 
19 |     
Message Bar Demo | <uif-message-bar>

20 |     In order for this demo to work you must first build the library in debug mode.
21 | 
22 |     
Default

23 |     
To render message banner, use the following markup:
24 |       

25 |       
26 |       <uif-message-bar>
27 |         <uif-content>lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit</uif-content>
28 |         <uif-link ng-href="http://ngofficeuifabric.com">Link text</uif-link>
29 |       </uif-message-bar>
30 |       
31 |     

32 |     

33 |       
34 |         lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit
35 |         Link text
36 |       
37 |     

38 | 
39 |     
Example with uif-type: error

40 |     

41 |     
42 |     <uif-message-bar uif-type="error">
43 |       <uif-content>lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit</uif-content>
44 |       <uif-link ng-href="http://ngofficeuifabric.com">Link text</uif-link>
45 |     </uif-message-bar>
46 |     
47 |     

48 |     
To render message banner, use the following markup:
49 |       

50 |       
51 |         lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit
52 |         Link text
53 |       
54 |     

55 | 
56 | 
57 | 
58 | 
59 | 


--------------------------------------------------------------------------------
/src/components/messagebar/demo/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | angular.module('demoApp', [
4 |   'officeuifabric.core',
5 |   'officeuifabric.components.messagebar'
6 | ]);
7 | 


--------------------------------------------------------------------------------
/src/components/messagebar/messageBarTypeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported types of the uif-messagebar directive
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the `uif-type` attribute of the `` component:
10 |  *
11 |  * let type: string = MessageBarTypeEnum[MessageBarTypeEnum.error];
12 |  */
13 | export enum MessageBarTypeEnum {
14 |     error,
15 |     remove,
16 |     severewarning,
17 |     success,
18 |     warning
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/navbar/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js
2 | !demoBasicUsage/*.js


--------------------------------------------------------------------------------
/src/components/navbar/demo/index.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |   'use strict';
 3 | 
 4 |   angular.module('demo', [
 5 |     'officeuifabric.core',
 6 |     'officeuifabric.components.navbar',
 7 |     'ngSanitize'
 8 |   ])
 9 |     .directive('raw', ['$sce', function ($sce) {
10 |       var directive = {
11 |         replace: true,
12 |         scope: {
13 |           src: '='
14 |         },
15 |         template: '
',
16 |         restrict: 'E',
17 |         link: function (scope, element) {
18 |           var template = angular.element(document.getElementById(scope.src));
19 |           scope.data = $sce.trustAsHtml(element.text(template.html()).html());
20 |         }
21 |       };
22 | 
23 |       return directive;
24 |     }]);
25 | 
26 |   angular.module('regularSample', ['demo'])
27 |     .controller('demoController',
28 |     ['$scope', function ($scope) {
29 |       $scope.isOpen = true;
30 |       $scope.colors = ['Green', 'Yellow', 'Red', 'White', 'Blue'];
31 | 
32 |       $scope.logColor = function (color) {
33 |         console.log(color);
34 |       };
35 | 
36 |       $scope.logClick = function (logData) {
37 |         console.log(logData);
38 |       };
39 | 
40 |       $scope.onSearch = function (search) {
41 |         alert('You searched for "' + search + '"');
42 |       };
43 |     }]);
44 | 
45 |   angular.module('animateSample', [
46 |     'ngAnimate',
47 |     'demo'
48 |   ])
49 |     .controller('demoController',
50 |     ['$scope', function ($scope) {
51 |       $scope.isOpen = true;
52 |     }]);
53 | })();
54 | 
55 | angular.element(document).ready(function () {
56 |   angular.bootstrap(document.getElementById('regularSample'), ['regularSample']);
57 |   angular.bootstrap(document.getElementById('animateSample'), ['animateSample']);
58 | });
59 | 


--------------------------------------------------------------------------------
/src/components/navbar/demo/mobile.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-contextual-menu demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 |   
17 | 
18 |   
19 |   
20 | 
21 | 
22 | 
23 |   

24 |     

25 |       
26 |     

27 |     
67 |   

68 | 
69 | 
70 | 


--------------------------------------------------------------------------------
/src/components/navbar/demo/styles.css:
--------------------------------------------------------------------------------
 1 | .mobile iframe {
 2 |   width: 470px;
 3 |   height: 350px;
 4 |   border: 1px solid #E2DFDF;
 5 | }
 6 | 
 7 | .code {
 8 |   margin: -20px 0 -20px -40px;
 9 | }
10 | 
11 | .ms-ContextualMenu.is-open-add{
12 |     animation: 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) fadeIn, slideRightIn40;
13 |     -webkit-animation: 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) fadeIn, slideRightIn40;
14 |     -webkit-animation-fill-mode: both;
15 |     animation-fill-mode: both;
16 | }
17 | 
18 | .ms-ContextualMenu.is-open-remove{
19 |     animation: 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9) fadeOut, scaleDown98;
20 |     -webkit-animation: 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9) fadeOut, scaleDown98;
21 |     -webkit-animation-fill-mode: both;
22 |     animation-fill-mode: both;
23 | 
24 |     box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
25 |     background-color: #fff;
26 |     border: 1px solid #c8c8c8;
27 |     display: block;
28 |     list-style-type: none;
29 |     position: absolute;
30 |     width: 180px;
31 |     z-index: 105;
32 | }
33 | 
34 | .ms-NavBar-item.ms-NavBar-item--search.is-open-add, .ms-NavBar-item.ms-NavBar-item--search.is-open-remove{
35 |   -webkit-transition: all .2s;
36 | 	transition: all .2s;
37 | }
38 | 
39 | @-webkit-keyframes fadeIn {
40 |   from {
41 |     opacity: 0;
42 |     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
43 |   }
44 | 
45 |   to {
46 |     opacity: 1;
47 |   }
48 | }
49 | 
50 | @-webkit-keyframes fadeOut {
51 |   from {
52 |     opacity: 1;
53 |     animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
54 |   }
55 | 
56 |   to {
57 |     opacity: 0;
58 |   }
59 | }
60 | 
61 | @-webkit-keyframes slideRightIn40 {
62 |   from {
63 |     transform: translate3d(-40px, 0px, 0px);
64 |   }
65 | 
66 |   to {
67 |     transform: translate3d(0px, 0px, 0px);
68 |   }
69 | }
70 | 
71 | @-webkit-keyframes scaleDown98 {
72 |   from {
73 |     transform: scale3d(1, 1, 1);
74 |   }
75 | 
76 |   to {
77 |     transform: scale3d(0.98, 0.98, 1);
78 |   }
79 | }


--------------------------------------------------------------------------------
/src/components/navbar/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 |   
 4 |   
 5 |   
 6 |     
 7 |       Item in bold with icons
 8 |       
 9 |     
10 |   
11 |   
12 |     Sub Menu
13 |     
14 |       
15 |       
16 |       
17 |       
18 |       
19 |     
20 |   
21 |   
22 |   
23 |     
24 |       Channels
25 |     
26 |     
27 |       
28 |       
29 |       
30 |       
31 |       
32 |       
33 |     
34 |   
35 |   
36 |     
37 |       Upload
38 |   
39 | 


--------------------------------------------------------------------------------
/src/components/navbar/demoBasicUsage/scripts.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |   'use strict';
 3 | 
 4 |   var demoApp = angular.module('demoApp', [
 5 |     'officeuifabric.core',
 6 |     'officeuifabric.components.navbar'
 7 |   ]);
 8 | 
 9 |   demoApp.controller('demoController', [
10 |     '$scope', demoController]);
11 | 
12 |   function demoController($scope) {
13 |     $scope.isOpen = true;
14 |     $scope.colors = ['Green', 'Yellow', 'Red', 'White', 'Blue'];
15 | 
16 |     $scope.logColor = function (color) {
17 |       console.log(color);
18 |     };
19 | 
20 |     $scope.logClick = function (logData) {
21 |       console.log(logData);
22 |     };
23 | 
24 |     $scope.onSearch = function (search) {
25 |       alert('You searched for "' + search + '"');
26 |     };
27 |   }
28 | })();
29 | 


--------------------------------------------------------------------------------
/src/components/orgchart/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js
2 | !demoTypeScriptUsage/bundle.js
3 | !demoTypeScriptUsage/webpack.config.js


--------------------------------------------------------------------------------
/src/components/orgchart/demo/Persona.Person2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/src/components/orgchart/demo/Persona.Person2.png


--------------------------------------------------------------------------------
/src/components/orgchart/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.orgchart'
 6 | ])
 7 |   .controller('demoController', function () {
 8 |     var vm = this;
 9 | 
10 |     vm.selectedItems1 = [];
11 |     vm.selectedItems2 = [];
12 | 
13 |     vm.items = [
14 |       {
15 |         country: 'Denmark',
16 |         imageUrl: 'Persona.Person2.png',
17 |         name: 'Kevin Magnussen',
18 |         presence: 'available',
19 |         selected1: true,
20 |         selected2: true,
21 |         team: 'Renault'
22 |       },
23 |       {
24 |         country: '	Germany',
25 |         imageUrl: 'Persona.Person2.png',
26 |         name: 'Sebastian Vettel',
27 |         presence: 'busy',
28 |         selected1: true,
29 |         selected2: true,
30 |         team: 'Ferrari'
31 |       },
32 |       {
33 |         country: '	United Kingdom',
34 |         imageUrl: 'Persona.Person2.png',
35 |         name: 'Jolyon Palmer',
36 |         presence: 'away',
37 |         selected1: false,
38 |         selected2: false,
39 |         team: 'Renault'
40 |       },
41 |       {
42 |         country: 'United Kingdom',
43 |         imageUrl: 'Persona.Person2.png',
44 |         name: 'Lewis Hamilton',
45 |         presence: 'blocked',
46 |         selected1: false,
47 |         selected2: false,
48 |         team: '	Mercedes'
49 |       }
50 |     ];
51 | 
52 |   });
53 | 


--------------------------------------------------------------------------------
/src/components/orgchart/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
 1 |   
 2 |     
 3 |         {{group}}
 4 |         
 5 |             
 9 |                 
10 |                 
11 |                 
12 |                     {{person.name}}
13 |                     {{person.country}}
14 |                 
15 |             
16 |         
17 |     
18 |   
19 | 


--------------------------------------------------------------------------------
/src/components/orgchart/orgChartPresenceEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc enum
 3 |  * @name OrgChartPresenceEnum
 4 |  * @module officeuifabric.components.orgchart
 5 |  *
 6 |  * @description
 7 |  * enum used by the OrcChartPersonaDirective
 8 |  */
 9 | export enum OrgChartPresenceEnum {
10 |   available,
11 |   busy,
12 |   away,
13 |   blocked,
14 |   dnd,
15 |   offline
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/orgchart/orgChartSelectModeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc filter
 3 |  * @name OrgChartSelectModeEnum
 4 |  * @module officeuifabric.components.orgchart
 5 |  *
 6 |  * @description
 7 |  * enum used by the OrcChartDirective
 8 |  */
 9 | export enum OrgChartSelectModeEnum {
10 |   single,
11 |   multiple
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/orgchart/orgChartStyleEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc enum
 3 |  * @name OrgChartStyleModeEnum
 4 |  * @module officeuifabric.components.orgchart
 5 |  *
 6 |  * @description
 7 |  * enum used by the OrcChartDirective
 8 |  */
 9 | export enum OrgChartStyleEnum {
10 |   standard,
11 |   square
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/overlay/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/overlay/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Overlay demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 | 
20 |   
Overlay Demo | <uif-overlay>
 
21 |   In order for this demo to work you must first build the library in debug mode.
22 | 
23 |   

24 |     Use the attribute uif-mode to specify the light or dark theme.  Any value other then dark will render the light theme.
25 |   

26 | 
27 |   

28 |     This markup: 

29 |     
30 |       <uif-icon uif-mode="{{vm.overlayMode}}" />
31 |     
32 |   

33 | 
34 |   

35 |     Renders this:
36 |     

37 |     
38 |     
39 |         

40 |             

41 |                 

42 |                     

43 |                         
48 |                     

49 |                 

50 |             

51 |         

52 |      
53 |   

54 | 
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/src/components/overlay/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.overlay'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {
12 |   $scope.vm = { overlayMode: 'light' };
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/overlay/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | Hello World
2 | 
3 | Hello World


--------------------------------------------------------------------------------
/src/components/overlay/overlayDirective.spec.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | 
 3 | describe('overlayDirective: ', () => {
 4 |     let element: angular.IAugmentedJQuery;
 5 |     let scope: angular.IScope;
 6 | 
 7 |     beforeEach(() => {
 8 |         angular.mock.module('officeuifabric.core');
 9 |         angular.mock.module('officeuifabric.components.overlay');
10 |     });
11 | 
12 |     beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function) => {
13 |         element = angular.element('hello world');
14 |         scope = $rootScope;
15 |         $compile(element)(scope);
16 |         scope.$digest();
17 |     }));
18 | 
19 |     /**
20 |      * Verifies directive generates the correct HTML element.
21 |      */
22 |     it('should render correct HTML', () => {
23 |         // get the rendered overlay element
24 |         let overlayElement: angular.IAugmentedJQuery = element.find('div');
25 | 
26 |         // make sure found the overlay
27 |         expect(overlayElement.length).toBe(1);
28 |         expect(overlayElement.text()).toBe('hello world');
29 |     });
30 | 
31 |     /**
32 |      * Verifies directive generates the correct CSS classes.
33 |      */
34 |     it('should render correct Office UI Fabric CSS classes', () => {
35 |         // get the rendered overlay element
36 |         let overlayElement: angular.IAugmentedJQuery = element.find('div');
37 | 
38 |         // ensure overlay has the correct classes
39 |         expect(overlayElement.eq(0)).toHaveClass('ms-Overlay');
40 |         expect(overlayElement.eq(0)).not.toHaveClass('ms-Overlay--dark');
41 |     });
42 | 
43 |     /**
44 |      * Verifies directive generates the correct CSS classes with dark theme.
45 |      */
46 |     it('should render correct Office UI Fabric CSS classes with dark theme', inject(($compile: Function) => {
47 |         element = angular.element('hello world');
48 |         $compile(element)(scope);
49 |         scope.$digest();
50 | 
51 |         // get the rendered overlay element
52 |         let overlayElement: angular.IAugmentedJQuery = element.find('div');
53 | 
54 |         // ensure overlay has the correct classes
55 |         expect(overlayElement.eq(0)).toHaveClass('ms-Overlay');
56 |         expect(overlayElement.eq(0)).toHaveClass('ms-Overlay--dark');
57 |     }));
58 | 
59 |     /**
60 |      * Verifies directive defaults to light theme if an invalid mode is passed and returns a console error message.
61 |      */
62 |     it('should render default (light) theme if an invalid mode is passed', inject(($compile: Function) => {
63 |         element = angular.element('hello world');
64 |         $compile(element)(scope);
65 |         scope.$digest();
66 | 
67 |         // get the rendered overlay element
68 |         let overlayElement: angular.IAugmentedJQuery = element.find('div');
69 | 
70 |         // ensure overlay has the correct classes
71 |         expect(overlayElement.eq(0)).toHaveClass('ms-Overlay');
72 |         expect(overlayElement.eq(0)).not.toHaveClass('ms-Overlay--dark');
73 |     }));
74 | });
75 | 


--------------------------------------------------------------------------------
/src/components/overlay/overlayDirective.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import { OverlayMode } from './overlayModeEnum';
 3 | 
 4 | /**
 5 |  * @ngdoc interface
 6 |  * @name IIconScope
 7 |  * @module officeuifabric.components.contextualmenu
 8 |  *
 9 |  * @description
10 |  * This is the scope used by the `` directive.
11 |  *
12 |  * @property {string} uifType - Icon to display. Possible types are defined in {@link IconEnum}.
13 |  */
14 | export interface IOverlayScope extends angular.IScope {
15 |   uifMode: OverlayMode;
16 | }
17 | 
18 | /**
19 |  * @controller
20 |  * @name OverlayController
21 |  * @private
22 |  * @description
23 |  * Used to more easily inject the Angular $log service into the directive.
24 |  */
25 | class OverlayController {
26 |   public static $inject: string[] = ['$log'];
27 |   constructor(public log: angular.ILogService) {
28 |   }
29 | }
30 | 
31 | /**
32 |  * @ngdoc directive
33 |  * @name uifOverlay
34 |  * @module officeuifabric.components.overlay
35 |  *
36 |  * @restrict E
37 |  *
38 |  * @description
39 |  * `` is an overlay directive.
40 |  *
41 |  * @see {link http://dev.office.com/fabric/styles}
42 |  *
43 |  * @usage
44 |  *
45 |  * html markup goes here
46 |  * html markup goes here
47 |  */
48 | export class OverlayDirective implements angular.IDirective {
49 | 
50 |   public static log: angular.ILogService;
51 | 
52 |   public restrict: string = 'E';
53 |   public template: string = '
';
54 |   public scope: {} = {
55 |     uifMode: '@'
56 |   };
57 |   public transclude: boolean = true;
58 | 
59 |   public static factory(): angular.IDirectiveFactory {
60 |     const directive: angular.IDirectiveFactory = (log: angular.ILogService) => new OverlayDirective(log);
61 |     directive.$inject = ['$log'];
62 |     return directive;
63 |   }
64 | 
65 |   public constructor(public log: angular.ILogService) {
66 |     OverlayDirective.log = log;
67 |   }
68 | 
69 |   public link(scope: IOverlayScope): void {
70 | 
71 |     scope.$watch('uifMode', (newValue: string, oldValue: string) => {
72 | 
73 |       // verify a valid overlay mode was passed in
74 |       if (OverlayMode[newValue] === undefined) {
75 |         OverlayDirective.log.error('Error [ngOfficeUiFabric] officeuifabric.components.overlay - Unsupported overlay mode: ' +
76 |           'The overlay mode (\'' + scope.uifMode + '\') is not supported by the Office UI Fabric. ' +
77 |           'Supported options are listed here: ' +
78 |           'https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/overlay/overlayModeEnum.ts');
79 |       }
80 |     });
81 |   }
82 | }
83 | 
84 | /**
85 |  * @ngdoc module
86 |  * @name officeuifabric.components.overlay
87 |  *
88 |  * @description
89 |  * Overlay
90 |  *
91 |  */
92 | export let module: angular.IModule = angular.module('officeuifabric.components.overlay', [
93 |   'officeuifabric.components'
94 | ])
95 |   .directive('uifOverlay', OverlayDirective.factory());
96 | 


--------------------------------------------------------------------------------
/src/components/overlay/overlayModeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for the modules supported by the Overlay directive.
 3 |  *
 4 |  * @ngdoc enum
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @name OverlayMode
 8 |  *
 9 |  */
10 | export enum OverlayMode {
11 |   light,
12 |   dark
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/panel/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/panel/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.commandbar'
 6 | ])
 7 |   .directive('raw', ['$sce', function ($sce) {
 8 |     var directive = {
 9 |       replace: true,
10 |       scope: {
11 |         src: '='
12 |       },
13 |       template: '
',
14 |       restrict: 'E',
15 |       link: function (scope, element) {
16 |         var template = angular.element(document.getElementById(scope.src));
17 |         scope.data = $sce.trustAsHtml(element.text(template.html()).html());
18 |       }
19 |     };
20 | 
21 |     return directive;
22 |   }]);
23 | 
24 | demoApp.controller('demoAppController', ['$scope', demoAppController]);
25 | 
26 | function demoAppController($scope) {
27 |   $scope.vm = {
28 |     isOpen1: false,
29 |     isOpen2: false
30 |   };
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/panel/panelDirectiveEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for all icons supported by Office UI Fabric. Enums in JavaScript are always number indexed, but this enum is
 3 |  * intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the  directive. Specifically, the string is passed
10 |  * to the `uif-type` attribute. To evaluate the enum value as a string:
11 |  *
12 |  * let icon: string = IconEnum[IconEnum.alert];
13 |  */
14 | 
15 | 
16 |  /**
17 |   * @ngdoc class
18 |   * @name PanelTypes
19 |   * @module officeuifabric.components.panel
20 |   *
21 |   * @description
22 |   * Determines size of panel, default is 1
23 |   */
24 |  export enum PanelTypes {
25 |    small,
26 |    medium,
27 |    large,
28 |    extralarge,
29 |    extraextralarge,
30 |    left
31 |  }
32 | 


--------------------------------------------------------------------------------
/src/components/peoplepicker/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js
2 | !demo/people.js
3 | !demoBasicUsage/*.js


--------------------------------------------------------------------------------
/src/components/peoplepicker/demo/Persona.Person2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/src/components/peoplepicker/demo/Persona.Person2.png


--------------------------------------------------------------------------------
/src/components/peoplepicker/demo/styles.css:
--------------------------------------------------------------------------------
1 | .code {
2 |   margin: -20px 0 -20px -40px;
3 | }
4 | 
5 | .usage {
6 |   font-size: 16px;
7 |   font-family: Verdana,sans-serif;
8 |   margin: 5px 0;
9 | }


--------------------------------------------------------------------------------
/src/components/persona/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/persona/demo/Persona.Person2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/src/components/persona/demo/Persona.Person2.png


--------------------------------------------------------------------------------
/src/components/persona/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.persona',
 6 |   'officeuifabric.components.dropdown'
 7 | ]).controller('personaController', ['$scope', personaDemoController]);
 8 | 
 9 | function personaDemoController($scope) {
10 |   $scope.vm = {
11 |     presence: 'dnd',
12 |     size: 'small',
13 |     style: 'round',
14 |     color: 'blue',
15 |     presenceOptions: {
16 |       'available': 'Available',
17 |       'away': 'Away',
18 |       'blocked': 'Blocked',
19 |       'busy': 'Busy',
20 |       'dnd': 'Do Not Disturb',
21 |       'offline': 'Offline'
22 |     },
23 |     sizeOptions: {
24 |       'tiny': 'Tiny',
25 |       'xsmall': 'Extra small',
26 |       'small': 'Small',
27 |       'medium': 'Medium',
28 |       'large': 'Large',
29 |       'xlarge': 'Extra large'
30 |     },
31 |     styleOptions: {
32 |       'round': 'Round',
33 |       'square': 'Square'
34 |     },
35 |     colorOptions: {
36 |       'lightBlue': 'Light Blue',
37 |       'blue': 'Blue',
38 |       'darkBlue': 'Dark Blue',
39 |       'teal': 'Teal',
40 |       'lightGreen': 'LightGreen',
41 |       'green': 'Green',
42 |       'darkGreen': 'Dark Green',
43 |       'lightPink': 'Light Pink',
44 |       'pink': 'Pink',
45 |       'magenta': 'Magenta',
46 |       'purple': 'Purple',
47 |       'black': 'Black',
48 |       'orange': 'Orange',
49 |       'red': 'Red',
50 |       'darkRed': 'Dark Red'
51 |     }
52 |   };
53 | 
54 | 
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/persona/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 
2 |   AL
3 |   Alton Lafferty
4 |   Interior Designer, Contoso
5 |   Office: 7/1234
6 |   Available - Video capable
7 | 


--------------------------------------------------------------------------------
/src/components/persona/sizeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported sizes of the Persona component.
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  *
10 |  * let size: string = PersonaSize[PersonaSize.tiny];
11 |  */
12 | export enum PersonaSize {
13 |   tiny,
14 |   xsmall,
15 |   small,
16 |   medium,
17 |   large,
18 |   xlarge
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/personacard/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/personacard/demo/Persona.Person2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngOfficeUIFabric/ng-officeuifabric/d245749b50652ded13f785c761464127b4513008/src/components/personacard/demo/Persona.Person2.png


--------------------------------------------------------------------------------
/src/components/personacard/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.personacard',
 6 |   'officeuifabric.components.dropdown'
 7 | ]).controller('personaCardController', ['$scope', personaCardDemoController]);
 8 | 
 9 | function personaCardDemoController($scope) {
10 |   $scope.vm = {
11 |     presence: 'dnd',
12 |     size: 'small',
13 |     style: 'round',
14 |     presenceOptions: {
15 |       'available': 'Available',
16 |       'away': 'Away',
17 |       'blocked': 'Blocked',
18 |       'busy': 'Busy',
19 |       'dnd': 'Do Not Disturb',
20 |       'offline': 'Offline'
21 |     },
22 |     sizeOptions: {
23 |       'xsmall': 'Extra small',
24 |       'small': 'Small',
25 |       'medium': 'Medium',
26 |       'large': 'Large',
27 |       'xlarge': 'Extra large'
28 |     },
29 |     styleOptions: {
30 |       'round' : 'Round',
31 |       'square' : 'Square'
32 |     }
33 |   };
34 | 
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/personacard/placeholderEnum.ts:
--------------------------------------------------------------------------------
1 | export enum PlaceholderEnum {
2 |   regular,
3 |   topright,
4 |   overflow
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/personacard/sizeEnum.ts:
--------------------------------------------------------------------------------
1 | export enum PersonaSize {
2 |   xsmall,
3 |   small,
4 |   medium,
5 |   large,
6 |   xlarge
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/pivot/.gitignore:
--------------------------------------------------------------------------------
1 | !demo*/*.js


--------------------------------------------------------------------------------
/src/components/pivot/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.pivot',
 6 |   'officeuifabric.components.dropdown'
 7 | ]).controller('pivotController', ['$scope', pivotController]);
 8 | 
 9 | function pivotController($scope) {
10 |   $scope.vm = {
11 |     selectedSize: 'large',
12 |     selectedType: 'tabs',
13 |     pivots: [
14 |       { title: 'My files' },
15 |       { title: 'Recent' },
16 |       { title: 'Shared with me' }
17 |     ],
18 |     selectedPivotTitle: undefined,
19 |     selectedPivot: undefined,
20 |     menuOpened: false
21 |   };
22 | 
23 |   $scope.openMenu = function () {
24 |     $scope.vm.menuOpened = !$scope.vm.menuOpened;
25 |   };
26 | 
27 |   $scope.$watch('vm.selectedPivotTitle', function (newTitle) {
28 |     $scope.vm.selectedPivot = { title: newTitle };
29 |   }, true);
30 | 
31 |   $scope.$watch('vm.selectedPivot', function (newPivot) {
32 |     if (newPivot !== undefined) {
33 |       $scope.vm.selectedPivotTitle = newPivot.title;
34 |     }
35 |   }, true);
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/pivot/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 |     
2 |     


--------------------------------------------------------------------------------
/src/components/pivot/demoBasicUsage/scripts.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.pivot',
 6 | ]).controller('pivotController', ['$scope', pivotController]);
 7 | 
 8 | function pivotController($scope) {
 9 |   $scope.vm = {
10 |     pivots: [
11 |       { title: 'My files' },
12 |       { title: 'Recent' },
13 |       { title: 'Shared with me' }
14 |     ]
15 |   };
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/pivot/pivotSizeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Enum for pivot sizes supported by Office UI Fabric.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * It is used to define size the pivot that will rendered by `uif-pivot` directive.
10 |  *
11 |  * let size: string = PivotSize[PivotSize.large];
12 |  */
13 | export enum PivotSize {
14 |   'regular',
15 |   'large'
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/pivot/pivotTypeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Enum for pivot type supported by Office UI Fabric.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * It is used to define type of the pivot that will rendered by `uif-pivot` directive.
10 |  *
11 |  * let type: string = PivotType[PivotType.tabs];
12 |  */
13 | export enum PivotType {
14 |   regular,
15 |   tabs
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/progressindicator/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/progressindicator/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Progress-Indicator demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 |   
17 | 
18 | 
19 | 
20 | 
21 |   
Progress Indicator Demo | <uif-progress-indicator>

22 |   In order for this demo to work you must first build the library in debug mode.
23 | 
24 |   

25 |     uif-name is an optional string to display the name field.

26 |     uif-description is an optional string to display the description field.

27 |     uif-percent-complete is an optional number between 0 and 100 which display the progress completed.  Defaults to zero.

28 |   

29 | 
30 |   

31 |     This markup: 

32 |     
33 |         <uif-progress-indicator uif-name="MyDocument.docx" uif-description="This is a sample document." uif-percent-complete="65"></uif-progress-indicator>
34 |     
35 |   

36 | 
37 |   

38 |     Renders this:
39 |     

40 |     
41 |   

42 | 
43 |   
Interactive Example

44 | 
45 |   

46 |     
Name: 

47 |     
Description: 

48 |     
Percent Complete: 

49 | 
50 |     
51 |   

52 | 
53 | 
54 | 
55 | 


--------------------------------------------------------------------------------
/src/components/progressindicator/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.progressindicator'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {
12 |   $scope.vm = {
13 |     name: 'MyDocument.docx',
14 |     description: 'This is a sample document.',
15 |     percentComplete: 25
16 |   };
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/progressindicator/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/components/searchbox/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js
2 | !demoBasicUsage/index.js


--------------------------------------------------------------------------------
/src/components/searchbox/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |     ngOfficeUiFabric | uif-Icon demo
 6 |     
 7 | 
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     
16 | 
17 | 
18 | 
19 | 
20 |     
Searchbox Demo | <uif-searchbox>

21 |     In order for this demo to work you must first build the library in debug mode.
22 | 
23 |     

24 |         Use the attributes ng-model to specify the value of the search field.
25 |     

26 |     

27 |         Use the attributes placeholder to specify the placeholder of the search field.
28 |     

29 | 
30 |     

31 |         This markup: 

32 |         
33 |             <uif-searchbox  />
34 |         
35 |     

36 | 
37 |     

38 |         Renders this:
39 |         

40 |         
41 |     

42 | 
43 |     

44 |         

45 |             Example using a controller
46 |         

47 |         
48 |         

49 |         Controller text: 
scope.value: {{value}}

50 |         

51 |         Searchbox can be disabled with disabled attribute or ng-disabled directive:
52 | 
53 |         

54 |             This markup: 


55 |         
56 |             <label>Click me to toggle: <input type="checkbox" ng-model="disabled"></label><br/>

57 |             <uif-searchbox  ng-disabled="disabled"/>
58 |         
59 |             


60 |             Renders this:
61 |             

62 |             

63 |             
64 |         

65 |         

66 |             This markup: 


67 |         
68 |             <uif-searchbox disabled="disabled"/>
69 |         
70 |             


71 |             Renders this:
72 |             

73 |             
74 |         

75 |     

76 | 
77 | 
78 | 
79 | 


--------------------------------------------------------------------------------
/src/components/searchbox/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.searchbox'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {
12 |   $scope.placeholder = 'Placeholder text';
13 |   $scope.value = 'search keyword';
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/searchbox/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/searchbox/demoBasicUsage/index.js:
--------------------------------------------------------------------------------
1 | angular.module('testApp').controller('testController', function ($scope) {
2 |   $scope.searchPlaceholder = 'Search Field';
3 | });
4 | 


--------------------------------------------------------------------------------
/src/components/searchbox/dirtyDemo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   
 7 |   
 8 |   
 9 | 
10 | 
11 | 
12 |   
Dirty Checking with ngOfficeUiFabric directives

13 | 
14 | 
15 |   

16 | 
17 |     
18 | 
19 |     
20 | 
21 |     
 {{ dirtyForm | json }}

22 | 
23 |   

24 | 
25 |   
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/src/components/spinner/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/spinner/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Spinner demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 |   
Spinner Demo | <uif-spinner>

20 |   In order for this demo to work you must first build the library in debug mode.
21 | 
22 |   
To render spinner, use the following markup:
23 |     

24 |     
25 |       <uif-spinner></uif-spinner>
26 |     
27 |   

28 | 
29 |   

30 |     Example:
31 |     

32 |     
33 |   

34 | 
35 |   
By default, small spinner is rendered. Above is shorthand of:
36 |     

37 |     
38 |       <uif-spinner uif-size="small"></uif-spinner>
39 |     
40 |   

41 | 
42 |   

43 |     Example:
44 |     

45 |     
46 |   

47 | 
48 |   
To render large spinner, use the following markup:
49 |     

50 |     
51 |       <uif-spinner uif-size="large"></uif-spinner>
52 |     
53 |   

54 | 
55 |   

56 |     Example:
57 |     

58 |     
59 |   

60 | 
61 |   
You can also add content to the spinner, which will become it's label :
62 |     

63 |     
64 |       <uif-spinner uif-size="large">Loading...</uif-spinner>
65 |     
66 |   

67 | 
68 |   

69 |     Example:
70 |     

71 |     Loading...
72 |   

73 | 
74 |   
You can control visibility of the spinner with ngShow directive
75 |     

76 |     
77 |       <uif-spinner uif-size="large" ng-show="spinnerVisible"></uif-spinner>
78 |     
79 |   

80 | 
81 |   

82 |     Example:
83 |     

84 |     
85 |     

86 |     
87 |   

88 | 
89 | 
90 | 
91 | 


--------------------------------------------------------------------------------
/src/components/spinner/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.spinner'
 6 | ]);
 7 | 
 8 | demoApp.controller('spinnerDemoController',['$scope', spinnerDemoController]);
 9 | 
10 | function spinnerDemoController($scope){
11 |   $scope.vm = {
12 |     spinnerVisible: false
13 |   };
14 | }


--------------------------------------------------------------------------------
/src/components/spinner/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/spinner/spinnerSizeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Enum for spinner sizes supported by Office UI Fabric.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * It is used to define size the spinner that will rendered by `uif-spinner` directive.
10 |  *
11 |  * let size: string = SpinnerSize[SpinnerSize.large];
12 |  */
13 | export enum SpinnerSize {
14 |   'small',
15 |   'large'
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/table/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.table'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController($scope) {  
12 |   $scope.selectedFiles = [];
13 |   $scope.files = [
14 |     {
15 |       fileName: 'file1.txt',
16 |       location: '~/file1.txt',
17 |       modified: new Date(),
18 |       type: 'TXT',
19 |       size: 20,
20 |       isSelected: false
21 |     },
22 |     {
23 |       fileName: 'file2.docx',
24 |       location: '~/file2.docx',
25 |       modified: new Date(),
26 |       type: 'DOCX',
27 |       size: 5,
28 |       isSelected: true
29 |     },
30 |     {
31 |       fileName: 'file3.txt',
32 |       location: '~/file3.txt',
33 |       modified: new Date(),
34 |       type: 'TXT',
35 |       size: 10,
36 |       isSelected: false
37 |     }
38 |   ];
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/table/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |     
 3 |         
 4 |             
 5 |             File name
 6 |             Location
 7 |             Modified
 8 |             Type
 9 |         
10 |     
11 |     
12 |         
13 |             
14 |             {{f.fileName}}
15 |             {{f.location}}
16 |             {{f.modified | date}}
17 |             {{f.type}}
18 |         
19 |     
20 | 


--------------------------------------------------------------------------------
/src/components/table/demoSortableColumns/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |     
 3 |         
 4 |             
 5 |             File name
 6 |             Location
 7 |             Modified
 8 |             Type
 9 |             Size
10 |         
11 |     
12 |     
13 |         
14 |             
15 |             {{f.fileName}}
16 |             {{f.location}}
17 |             {{f.modified | date}}
18 |             {{f.type}}
19 |             {{f.size}}
20 |         
21 |     
22 | 


--------------------------------------------------------------------------------
/src/components/table/tableRowSelectModeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enumeration of the different row selection modes supported by the table directive.
 3 |  *
 4 |  * @readonly
 5 |  * @enum {string}
 6 |  * @usage
 7 |  *
 8 |  * This enumeration is used to specify which row selection mode the table should use.
 9 |  */
10 | export enum TableRowSelectModeEnum {
11 |   none,
12 |   single,
13 |   multiple
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/table/tableTypeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported input types of the uif-table directive
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the `uif-table-type` attribute of the following components:
10 |  *
11 |  * let style: string = TableTypeEnum[TableTypeEnum.text];
12 |  */
13 | export enum TableTypeEnum {
14 |   fluid,
15 |   fixed
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/textfield/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/textfield/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.textfield'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', ['$scope', demoController]);
 9 | 
10 | function demoController($scope) {
11 |   $scope.fieldType = 'text';
12 | 
13 |   $scope.switchToPassword = function(){
14 |     $scope.fieldType = 'password';
15 |   };
16 |   $scope.switchToText = function(){
17 |     $scope.fieldType = 'text';
18 |   };
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/textfield/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/textfield/demoBasicUsage/index.ts:
--------------------------------------------------------------------------------
1 | angular.module('testApp').controller('testController', function ($scope: any): void {
2 |     $scope.value = 'Textfield value';
3 | });
4 | 


--------------------------------------------------------------------------------
/src/components/textfield/demoMultiline/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Textfield demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 | 
20 |   
Textfield Demo | <uif-textfield>

21 |   In order for this demo to work you must first build the library in debug mode.
22 | 
23 |   
Basic multiline usage

24 |   

25 |     This markup: 

26 |     
27 |       <uif-textfield uif-label="This is the label" uif-description="This is the description" uif-multiline="true" />
28 |     
29 |   

30 |   

31 |     Renders this:
32 |     

33 |     
34 |   

35 | 
36 | 
Basic multiline usage with placeholder

37 |   

38 |     This markup: 

39 |     
40 |       <uif-textfield uif-label="This is the label" uif-description="This is the description" uif-multiline="true" />
41 |     
42 |   

43 |   

44 |     Renders this:
45 |     

46 |     
47 |   

48 | 
49 |   
Disabled

50 |   

51 |     This markup: 

52 |     
53 | 
54 |     
55 |   

56 |   

57 |     Renders this:
58 |     

59 |     
60 | 
61 |   

62 |   

63 |     Disabled
64 |   

65 | 
66 | 
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/src/components/textfield/demoPlaceholder/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/textfield/demoUnderlined/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/textfield/dirtyDemo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   
 7 |   
 8 |   
 9 | 
10 | 
11 | 
12 |   
Dirty Checking with ngOfficeUiFabric directives

13 | 
14 | 
15 |   

16 | 
17 |     
18 | 
19 |     
20 | 
21 |     
 {{ dirtyForm | json }}

22 | 
23 |   

24 | 
25 | 
26 | 
27 |   
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/src/components/textfield/uifTypeEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported input types of the uif-textfield directive
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the `uif-type` attribute of the following components:
10 |  *
11 |  * let style: string = InputTypeEnum[InputTypeEnum.text];
12 |  */
13 | export enum InputTypeEnum {
14 |   text,
15 |   password,
16 |   email,
17 |   url,
18 |   tel,
19 |   range,
20 |   number
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/toggle/.gitignore:
--------------------------------------------------------------------------------
1 | !demo/index.js


--------------------------------------------------------------------------------
/src/components/toggle/demo/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   ngOfficeUiFabric | uif-Toggle demo
 6 |   
 7 | 
 8 |   
 9 |   
10 |   
11 |   
12 |   
13 |   
14 |   
15 |   
16 | 
17 | 
18 | 
19 | 
20 |   
Toggle Demo | <uif-toggle>

21 |   In order for this demo to work you must first build the library in debug mode.
22 | 
23 |   
Default Toggle

24 |   

25 |     This markup: 

26 |     
27 |     <uif-toggle uif-label-off="Label off" uif-label-on="Label on" ng-model="toggled"/>
28 |     
29 |   

30 | 
31 |   

32 |     Renders this:
33 |     

34 |     
35 | 
36 |   

37 |   

38 |     Toggled: {{toggled}}
39 |   

40 | 
41 |   
Default Toogle with text location left

42 |   

43 |     This markup: 

44 |     
45 |       <uif-label>Toggle Control</uif-label>

46 |       <uif-toggle uif-label-off="Label off" uif-label-on="Label on" uif-text-location="left"/>
47 |     
48 |   

49 | 
50 |   

51 |     Renders this:
52 |     

53 |     Toggle Control
54 |     
55 | 
56 |   

57 | 
58 |   
Toggle with transcluded label

59 | 
60 |   

61 |     This markup: 

62 |     
63 |       <uif-toggle uif-label-off="No" uif-label-on="Yes" ng-model="toggled">Toggle this, or not</uif-toggle>
64 |     
65 |   

66 | 
67 |   

68 |     Renders this:
69 |     

70 |     Toggle this, or not
71 |   

72 | 
73 |   
Disabled Toggle

74 |   

75 |     This markup: 

76 |     
77 |       <uif-toggle uif-label-off="Label off" uif-label-on="Label on" ng-disabled="disabled"/>
78 |     
79 |   

80 | 
81 |   

82 |     Renders this:
83 |     

84 |     
85 | 
86 |   

87 |   

88 |     Disabled
89 |   

90 | 
91 | 
92 | 
93 | 


--------------------------------------------------------------------------------
/src/components/toggle/demo/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var demoApp = angular.module('demoApp', [
 4 |   'officeuifabric.core',
 5 |   'officeuifabric.components.toggle'
 6 | ]);
 7 | 
 8 | demoApp.controller('demoController', [
 9 |   '$scope', demoController]);
10 | 
11 | function demoController() {
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/toggle/demoBasicUsage/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 


--------------------------------------------------------------------------------
/src/components/toggle/demoDirty/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   
 7 |   
 8 |   
 9 | 
10 | 
11 | 
12 | 
Dirty Checking with ngOfficeUiFabric directives

13 | 
14 |   

15 | 
16 |     
17 | 
18 |     
19 | 
20 |     
 {{ dirtyForm | json }}

21 | 
22 |   

23 | 
24 |   
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/src/core/core.ts:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | 
 3 | /**
 4 |  * @ngdoc module
 5 |  * @name officeuifabric.core
 6 |  *
 7 |  * @description Office UI Fabric Angular directives core module with shared components in the library.
 8 |  *
 9 |  */
10 | export let module: angular.IModule = angular.module('officeuifabric.core', []);
11 | 


--------------------------------------------------------------------------------
/src/core/jquery.phantomjs.fix.js:
--------------------------------------------------------------------------------
 1 | jQuery.each(('blur focus focusin focusout click dblclick ' +
 2 |   'mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave').split(' '),
 3 |   function (i, name) {
 4 | 
 5 |     jQuery.fn[name] = function () {
 6 |       var el = this[0];
 7 |       var ev = document.createEvent('MouseEvent');
 8 |       ev.initMouseEvent(
 9 |         name,
10 |         true /* bubble */, true /* cancelable */,
11 |         window, null,
12 |         0, 0, 0, 0, /* coordinates */
13 |         false, false, false, false, /* modifier keys */
14 |         0 /*left*/, null
15 |       );
16 |       el.dispatchEvent(ev);
17 |     };
18 |   });
19 | 
20 | jQuery.each(('keydown keyup keypress').split(' '),
21 |   function (i, name) {
22 | 
23 |     jQuery.fn[name] = function (keyCode) {
24 |       var el = this[0];
25 |       var event = document.createEvent('Events');
26 |       event.initEvent(name, true, true);
27 |       event.keyCode = keyCode;
28 |       el.dispatchEvent(event);
29 |     };
30 |   });
31 | 
32 | 


--------------------------------------------------------------------------------
/src/core/person.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @ngdoc interface
 3 |  * @name IPerson
 4 |  * @module officeuifabric.components.core
 5 |  *
 6 |  * @description
 7 |  * This is helper interface used by person-related directives (,  and others)
 8 |  *
 9 |  * @property {string} icon             - Person's avatar
10 |  * @property {string} initials         - Person's initials
11 |  * @property {string} primaryText      - Person's primary text, usually that's person's full name
12 |  * @property {string} secondaryText    - Person's secondary text, here can be person's group or job title
13 |  * @property {string} color            - Person's color
14 |  * @property {string} presence         - String representing person's presense, based on PresenceEnum
15 |  */
16 | export interface IPerson {
17 |   icon: string;
18 |   initials: string;
19 |   primaryText: string;
20 |   secondaryText: string;
21 |   color: string;
22 |   presence: string;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/core/personaInitialsColorEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported initials color of persona-based components, Persona, PersonaCard & OrgChart.
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the `uif-initials-color` attribute of the following components,
10 |  * - uif-persona
11 |  * - ufi-persona-card
12 |  * - uif-org-chart
13 |  * as follows,
14 |  *
15 |  * let color, string = PersonaInitialsColor[PersonaInitialsColor.blue];
16 |  */
17 | export enum PersonaInitialsColor {
18 |   lightBlue,
19 |   blue,
20 |   darkBlue,
21 |   teal,
22 |   lightGreen,
23 |   green,
24 |   darkGreen,
25 |   lightPink,
26 |   pink,
27 |   magenta,
28 |   purple,
29 |   black,
30 |   orange,
31 |   red,
32 |   darkRed
33 | }
34 | 


--------------------------------------------------------------------------------
/src/core/personaPresenceEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported presence statuses of persona-based components: Persona, PersonaCard & OrgChart.
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the `uif-presence` attribute of the following components:
10 |  * - uif-persona
11 |  * - ufi-persona-card
12 |  * - uif-org-chart
13 |  * as follows:
14 |  *
15 |  * let presence: string = PresenceEnum[PresenceEnum.offline];
16 |  */
17 | export enum PresenceEnum {
18 |   available,
19 |   away,
20 |   blocked,
21 |   busy,
22 |   dnd,
23 |   offline
24 | }
25 | 


--------------------------------------------------------------------------------
/src/core/personaStyleEnum.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Enum for supported styles of persona-based components: Persona, PersonaCard & OrgChart.
 3 |  * This enum is intended to be used as a striangular.
 4 |  *
 5 |  * @readonly
 6 |  * @enum {string}
 7 |  * @usage
 8 |  *
 9 |  * This is used to generate the string that you pass into the `uif-style` attribute of the following components:
10 |  * - uif-persona
11 |  * - ufi-persona-card
12 |  * - uif-org-chart
13 |  * as follows:
14 |  *
15 |  * let style: string = PersonaStyleEnum[PersonaStyleEnum.round];
16 |  */
17 | export enum PersonaStyleEnum {
18 |   round,
19 |   square
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [ "es2015", "dom" ],
 4 |     "module": "commonjs",
 5 |     "removeComments": true,
 6 |     "target": "es5"
 7 |   },
 8 |   "exclude": [
 9 |     "node_modules"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rules": {
  3 |     "align": [
  4 |       true,
  5 |       "parameters",
  6 |       "arguments",
  7 |       "statements"
  8 |     ],
  9 |     "ban": false,
 10 |     "class-name": true,
 11 |     "comment-format": [
 12 |       true,
 13 |       "check-space",
 14 |       "check-lowercase"
 15 |     ],
 16 |     "curly": true,
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "indent": [
 20 |       true,
 21 |       "spaces"
 22 |     ],
 23 |     "interface-name": [
 24 |       true,
 25 |       "always-prefix"
 26 |     ],
 27 |     "jsdoc-format": true,
 28 |     "label-position": true,
 29 |     "max-line-length": [
 30 |       true,
 31 |       140
 32 |     ],
 33 |     "member-access": true,
 34 |     "member-ordering": [
 35 |       true,
 36 |       "public-before-private",
 37 |       "static-before-instance",
 38 |       "variables-before-functions"
 39 |     ],
 40 |     "no-any": false,
 41 |     "no-arg": true,
 42 |     "no-bitwise": true,
 43 |     "no-conditional-assignment": true,
 44 |     "no-console": [
 45 |       true,
 46 |       "debug",
 47 |       "info",
 48 |       "time",
 49 |       "timeEnd",
 50 |       "trace"
 51 |     ],
 52 |     "no-construct": true,
 53 |     "no-debugger": true,
 54 |     "no-duplicate-variable": true,
 55 |     "no-empty": true,
 56 |     "no-eval": true,
 57 |     "no-inferrable-types": false,
 58 |     "no-internal-module": true,
 59 |     "no-require-imports": false,
 60 |     "no-shadowed-variable": true,
 61 |     "no-string-literal": true,
 62 |     "no-switch-case-fall-through": true,
 63 |     "no-trailing-whitespace": true,
 64 |     "no-unused-expression": true,
 65 |     "no-use-before-declare": false,
 66 |     "no-var-keyword": true,
 67 |     "no-var-requires": false,
 68 |     "object-literal-sort-keys": true,
 69 |     "one-line": [
 70 |       true,
 71 |       "check-open-brace",
 72 |       "check-catch",
 73 |       "check-else",
 74 |       "check-whitespace"
 75 |     ],
 76 |     "quotemark": [
 77 |       true,
 78 |       "single",
 79 |       "avoid-escape"
 80 |     ],
 81 |     "radix": true,
 82 |     "semicolon": [
 83 |       true,
 84 |       "always"
 85 |     ],
 86 |     "switch-default": true,
 87 |     "trailing-comma": [
 88 |       true,
 89 |       {
 90 |         "multiline": "never",
 91 |         "singleline": "never"
 92 |       }
 93 |     ],
 94 |     "triple-equals": [
 95 |       true,
 96 |       "allow-null-check"
 97 |     ],
 98 |     "typedef": [
 99 |       true,
100 |       "call-signature",
101 |       "parameter",
102 |       "property-declaration",
103 |       "variable-declaration",
104 |       "member-variable-declaration"
105 |     ],
106 |     "typedef-whitespace": [
107 |       true,
108 |       {
109 |         "call-signature": "nospace",
110 |         "index-signature": "nospace",
111 |         "parameter": "nospace",
112 |         "property-declaration": "nospace",
113 |         "variable-declaration": "nospace"
114 |       }
115 |     ],
116 |     "variable-name": [
117 |       true,
118 |       "check-format",
119 |       "allow-leading-underscore",
120 |       "ban-keywords"
121 |     ],
122 |     "whitespace": [
123 |       true,
124 |       "check-branch",
125 |       "check-decl",
126 |       "check-operator",
127 |       "check-separator",
128 |       "check-type"
129 |     ]
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/wallaby.config.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   IWallaby,
 3 |   IWallabyConfig,
 4 |   IWallabyCompilers,
 5 |   IWallabyProcessor,
 6 |   IWallabyFilePattern,
 7 |   IWallabyEnvironment
 8 | } from 'wallabyjs';
 9 | import { BuildConfig } from './build/config/build';
10 | import { WebPackConfig } from './build/config/webpack';
11 | 
12 | class WallabyConfig implements IWallabyConfig {
13 | 
14 |   public files: IWallabyFilePattern[] = [
15 |     { instrument: false, pattern: BuildConfig.NODE_MODULES + '/angular/angular.js' },
16 |     { instrument: false, pattern: BuildConfig.NODE_MODULES + '/angular-mocks/angular-mocks.js' },
17 |     { instrument: false, pattern: BuildConfig.NODE_MODULES + '/jquery/dist/jquery.min.js' },
18 |     { instrument: false, pattern: BuildConfig.NODE_MODULES + '/pickadate/lib/picker.js' },
19 |     { instrument: false, pattern: BuildConfig.NODE_MODULES + '/pickadate/lib/picker.date.js' },
20 |     { instrument: false, pattern: BuildConfig.NODE_MODULES + '/jasmine-jquery/lib/jasmine-jquery.js' },
21 |     { instrument: false, pattern: 'src/core/jquery.phantomjs.fix.js' },
22 |     { load: false, pattern: 'src/**/*.ts' },
23 |     { ignore: true, pattern: 'src/**/*.spec.ts' }
24 |   ];
25 | 
26 |   public tests: IWallabyFilePattern[] = [
27 |     { load: false, pattern: 'src/**/*.spec.ts' },
28 |     { load: false, pattern: 'src/**/*.ts' }
29 |   ];
30 | 
31 |   public compilers: IWallabyCompilers = {
32 |     'src/**/*.ts': this.wallaby.compilers.typeScript()
33 |   };
34 | 
35 |   public env: IWallabyEnvironment = {
36 |     params: { runner: '--web-security=false' },
37 |     runner: require('phantomjs2-ext').path,
38 |     viewportSize: { width: 600 }
39 |   };
40 | 
41 |   public postprocessor: IWallabyProcessor;
42 | 
43 |   /**
44 |    * Configure testing framework / sandbox environment just before a test run starts.
45 |    */
46 |   public setup: any = function (): void {
47 |     // required to trigger test loader
48 |     let moduleBundle: string = '__moduleBundler';
49 |     window[moduleBundle].loadTests();
50 |   };
51 | 
52 |   constructor(private wallaby: IWallaby) {
53 |     this.configPostProcessor();
54 |   }
55 | 
56 |   /**
57 |    * Configure the Wallaby postprocessor for webpack.
58 |    */
59 |   private configPostProcessor(): void {
60 |     let webpackConfig: WebPackConfig = new WebPackConfig();
61 | 
62 |     this.postprocessor = require('wallaby-webpack')({
63 |       entryPatterns: [
64 |         'src/core/components.js',
65 |         'src/core/core.js',
66 |         'src/**/*.spec.js'
67 |       ],
68 |       externals: webpackConfig.externals,
69 |       // can't use same resolve from webpack config because with regular
70 |       // webpack, need to load TS then JS, but with Wallaby, need JS then TS
71 |       resolve: {
72 |         extensions: ['.js', '.ts'],
73 |         modules: webpackConfig.resolve.modules
74 |       }
75 |     });
76 |   }
77 | 
78 | }
79 | 
80 | module.exports = (wallaby: IWallaby) => {
81 |   return new WallabyConfig(wallaby);
82 | };
83 | 


--------------------------------------------------------------------------------