http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.html ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.html b/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.html new file mode 100644 index 0000000..7e9baf7 --- /dev/null +++ b/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.html @@ -0,0 +1,3060 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> + +<md-sidenav-container> + <md-sidenav #sidenav mode="over" align="end" opened="false"> + <div fxLayout="column" fxLayoutAlign="space-between center"> + <p>You can also open a dialog from a side nav.</p> + <button md-raised-button color="fds-primary" (click)="openDialog()">Show simple dialog</button> + </div> + </md-sidenav> + <div id="fds-demo"> + <md-card> + <md-card-title class="pad-bottom-sm">Fluid Design System</md-card-title> + <md-divider></md-divider> + <md-card-content class="pad-top-sm"> + <p>With the Fluid Design System module, we get an atomic, reusable component platform for the Apache Nifi Registry to consume, while collaborating in an open source model. This module packages the <a class="link" href="https://material.angular.io/components"; target="_blank">Angular Material</a> module as well as the <a class="link" href="https://teradata.github.io/covalent/#/components"; target="_blank">Teradata Covalent</a> module. These modules have been themed to match the FDS color palette.</p> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Setup</md-card-title> + <md-divider></md-divider> + <md-card-content> + <p>Import the FDS Core NgModule into your AppModule</p> + <p>HTML:</p> + <pre lang="javascript"> + <![CDATA[ + var ngCore = require('@angular/core'); + var fdsCore = require('@fluid-design-system/core'); + // other imports + ... + new ngCore.NgModule({ + imports: [ + fdsCore, + // (optional) Additional imports + ], + ... + }) + ]]> + </pre> + <p>The core FDS styles also need to be included in your `index.html` like:</p> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <link href="../node_modules/@fluid-design-system/core/common/styles/css/fluid-design-system.css" rel="stylesheet"> + ]]> + </pre> + <p>Or, if you are using the Angular CLI you will need to add a new entry to the "styles" list in .angular-cli.json.</p> + <p>JSON:</p> + <pre lang="json"> + <![CDATA[ + "styles": [ + "../node_modules/@fluid-design-system/core/common/styles/fluid-design-system.scss" + ] + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Typography</md-card-title> + <md-divider></md-divider> + <md-card-content> + <p class="md-body-1">Angular Material provides <a class="link" href="https://material.io/guidelines/style/typography.html"; target="_blank">typography</a> CSS classes you can use to create visual consistency across your application.</p> + <p class="md-body-1"> + <strong>Note:</strong> + <span>Base font size is 10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.</span> + </p> + <h3 class="md-title">Header Styles</h3> + <md-divider class="push-top push-bottom"></md-divider> + <p class="md-body-1">To preserve semantic structures, you can optionally style the <code><h1></code> - <code><h6></code> heading tags with the styling classes shown below:</p> + <p>CSS:</p> + <div layout-align="center end"> + <div layout="row" layout-align="start center"> + <code flex="15">.md-display-4</code> + <span class="md-display-4">Light 112px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-display-3</code> + <span class="md-display-3">Regular 56px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-display-2</code> + <span class="md-display-2">Regular 45px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-display-1</code> + <span class="md-display-1">Regular 34px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-headline</code> + <span class="md-headline">Regular 24px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-title</code> + <span class="md-title">Medium 20px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-subhead</code> + <span class="md-subhead">Regular 16px</span> + </div> + </div> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <!-- Large Heading --> + <h1 class="md-display-4">Roboto is the standard typeface on Android.</h1> + <h2 class="md-display-3">Roboto and Noto are the standard typefaces on Android and Chrome.</h2> + <h3 class="md-display-2">Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.</h3> + <!-- Medium Heading --> + <h1 class="md-display-1">Roboto is the standard typeface on Android.</h1> + <h2 class="md-headline">Roboto and Noto are the standard typefaces on Android and Chrome.</h2> + <h3 class="md-subhead">Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.</h3> + ]]> + </pre> + <h3 class="md-title">Body Copy</h3> + <md-divider class="push-top push-bottom"></md-divider> + <p>CSS:</p> + <div class="md-body-1" layout-align="center end"> + <div layout="row" layout-align="start center"> + <code flex="15">.md-body-1</code> + <span class="md-body-1">Regular 14px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-body-2</code> + <span class="md-body-2">Medium 14px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-button</code> + <span class="md-button md-raised">Medium 14px</span> + </div> + <div layout="row" layout-align="start center"> + <code flex="15">.md-caption</code> + <span class="md-caption">Regular 12px</span> + </div> + </div> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <!-- body copy --> + <p class="md-body-1">Roboto is the standard typeface on Android.</p> + <p class="md-body-2">Roboto and Noto are the standard typefaces on Android and Chrome.</p> + <p class="md-button">Roboto and Noto are the standard typefaces on Android and Chrome.</p> + <p class="md-caption">Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.</p> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Raised Buttons</md-card-title> + <md-divider></md-divider> + <md-card-content> + <p>Tip: Use UPPERCASE text for 1-2 words, and Titlecase text for 3+ words.</p> + <button md-raised-button color="primary">Primary</button> + <button md-raised-button color="accent">Accent</button> + <button md-raised-button color="warn">Warn</button> + <button md-raised-button color="fds-primary">FDS Primary</button> + <button md-raised-button color="fds-secondary">FDS Secondary</button> + <button md-raised-button color="fds-regular">FDS regular</button> + <button md-raised-button color="fds-warn">FDS warn</button> + <button md-raised-button color="fds-critical">FDS critical</button> + <button md-raised-button disabled color="primary">Primary</button> + <button md-raised-button disabled color="accent">Accent</button> + <button md-raised-button disabled color="warn">Warn</button> + <button md-raised-button disabled color="fds-primary">FDS primary</button> + <button md-raised-button disabled color="fds-secondary">FDS Secondary</button> + <button md-raised-button disabled color="fds-regular">FDS regular</button> + <button md-raised-button disabled color="fds-warn">FDS warn</button> + <button md-raised-button disabled color="fds-critical">FDS critical</button> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <!-- Themed Raised Buttons --> + <button md-raised-button color="primary">Primary</button> + <button md-raised-button color="accent">Secondary</button> + <button md-raised-button color="warn">warn</button> + <button md-raised-button color="fds-primary">FDS Primary</button> + <button md-raised-button color="fds-secondary">FDS Secondary</button> + <button md-raised-button color="fds-regular">FDS regular</button> + <button md-raised-button color="fds-warn">FDS warn</button> + <button md-raised-button color="fds-critical">FDS critical</button> + <!-- Disabled Raised Buttons --> + <button md-raised-button disabled color="primary">Primary</button> + <button md-raised-button disabled color="accent">Secondary</button> + <button md-raised-button disabled color="warn">warn</button> + <button md-raised-button disabled color="fds-primary">FDS primary</button> + <button md-raised-button disabled color="fds-secondary">FDS Secondary</button> + <button md-raised-button disabled color="fds-regular">FDS regular</button> + <button md-raised-button disabled color="fds-warn">FDS warn</button> + <button md-raised-button disabled color="fds-critical">FDS critical</button> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Links</md-card-title> + <md-divider></md-divider> + <md-card-content> + <a class="link" href="https://material.angular.io"; target="_blank">Angular Material</a> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <a class="link" href="https://material.angular.io"; target="_blank">Angular Material</a> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Flat Buttons</md-card-title> + <md-divider></md-divider> + <md-card-content> + <md-card-actions> + <button md-button>Defualt</button> + <button md-button color="primary">Primary</button> + <button md-button color="accent">Secondary</button> + <button md-button color="warn">Warn</button> + <button md-button disabled>Disabled Defualt</button> + <button md-button disabled color="primary">Disabled Primary</button> + <button md-button disabled color="accent">Disabled Secondary</button> + <button md-button disabled color="warn">Disabled Warn</button> + </md-card-actions> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <!-- Themed Flat Buttons --> + <button md-button>Defualt</button> + <button md-button color="primary">Primary</button> + <button md-button color="accent">Secondary</button> + <button md-button color="warn">warn</button> + <!-- Disabled Flat Buttons --> + <button md-button disabled>disabled Defualt</button> + <button md-button disabled color="primary">disabled primary</button> + <button md-button disabled color="accent">disabled Secondary</button> + <button md-button disabled color="warn">disabled warn</button> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Fab Buttons</md-card-title> + <md-divider></md-divider> + <md-card-content> + <md-card-actions class="pad-left-sm"> + <button md-mini-fab color="primary">P</button> + <button md-mini-fab color="accent">A</button> + <button md-mini-fab color="warn">W</button> + <button md-mini-fab disabled color="primary">P</button> + <button md-mini-fab disabled color="accent">A</button> + <button md-mini-fab disabled color="warn">W</button> + </md-card-actions> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <!-- Themed Fab Buttons --> + <button md-mini-fab color="primary">P</button> + <button md-mini-fab color="accent">A</button> + <button md-mini-fab color="warn">W</button> + <!-- Disabled Fab Buttons --> + <button md-mini-fab disabled color="primary">P</button> + <button md-mini-fab disabled color="accent">A</button> + <button md-mini-fab disabled color="warn">W</button> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Button Toggles</md-card-title> + <md-divider></md-divider> + <md-card-content> + <md-button-toggle-group name="alignment"> + <md-button-toggle value="left"> + <md-icon>format_align_left</md-icon> + </md-button-toggle> + <md-button-toggle value="center"> + <md-icon>format_align_center</md-icon> + </md-button-toggle> + <md-button-toggle value="right"> + <md-icon>format_align_right</md-icon> + </md-button-toggle> + <md-button-toggle value="justify"> + <md-icon>format_align_justify</md-icon> + </md-button-toggle> + </md-button-toggle-group> + <div fxLayout="row" class="pad-top-md pad-bot-md"></div> + <md-button-toggle-group name="onOffToggle" class="on-off-toggle-group"> + <md-button-toggle value="on" [checked]="true"> + ON + </md-button-toggle> + <md-button-toggle value="off" class="off-toggle"> + OFF + </md-button-toggle> + </md-button-toggle-group> + <div fxLayout="row" class="pad-top-md pad-bot-md"></div> + <md-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">34</div> + <div class="pad-top-sm" fxFlex="45">Assets</div> + </div> + </md-button-toggle> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">300</div> + <div class="pad-top-sm" fxFlex="45">Extensions</div> + </div> + </md-button-toggle> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">5000</div> + <div class="pad-top-sm" fxFlex="45">Flows</div> + </div> + </md-button-toggle> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">0</div> + <div class="pad-top-sm" fxFlex="45">Certifications</div> + </div> + </md-button-toggle> + </md-button-toggle-group> + <div fxLayout="row" class="pad-top-md pad-bot-md"></div> + <md-button-toggle-group name="nifi-registry-administration-perspective" fxLayout="row" class="tab-toggle-group"> + <md-button-toggle value="general" class="uppercase"> + general + </md-button-toggle> + <div fxLayout="row" class="pad-left-md"></div> + <md-button-toggle value="users" class="uppercase"> + Users + </md-button-toggle> + <div fxLayout="row" class="pad-left-md"></div> + <md-button-toggle value="workflow" class="uppercase"> + Workflow + </md-button-toggle> + </md-button-toggle-group> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <md-button-toggle-group name="alignment"> + <md-button-toggle value="left"> + <md-icon>format_align_left</md-icon> + </md-button-toggle> + <md-button-toggle value="center"> + <md-icon>format_align_center</md-icon> + </md-button-toggle> + <md-button-toggle value="right"> + <md-icon>format_align_right</md-icon> + </md-button-toggle> + <md-button-toggle value="justify"> + <md-icon>format_align_justify</md-icon> + </md-button-toggle> + </md-button-toggle-group> + <div fxLayout="row" class="pad-top-md pad-bot-md"></div> + <md-button-toggle-group name="onOffToggle" class="on-off-toggle-group"> + <md-button-toggle value="on" [checked]="true"> + ON + </md-button-toggle> + <md-button-toggle value="off" class="off-toggle"> + OFF + </md-button-toggle> + </md-button-toggle-group> + <div fxLayout="row" class="pad-top-md pad-bot-md"></div> + <md-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">34</div> + <div class="pad-top-sm" fxFlex="45">Assets</div> + </div> + </md-button-toggle> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">300</div> + <div class="pad-top-sm" fxFlex="45">Extensions</div> + </div> + </md-button-toggle> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">5000</div> + <div class="pad-top-sm" fxFlex="45">Flows</div> + </div> + </md-button-toggle> + <md-button-toggle> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">0</div> + <div class="pad-top-sm" fxFlex="45">Certifications</div> + </div> + </md-button-toggle> + </md-button-toggle-group> + <div fxLayout="row" class="pad-top-md pad-bot-md"></div> + <md-button-toggle-group name="nifi-registry-administration-perspective" fxLayout="row" class="tab-toggle-group"> + <md-button-toggle value="general" class="uppercase"> + general + </md-button-toggle> + <div fxLayout="row" class="pad-left-md"></div> + <md-button-toggle value="users" class="uppercase"> + Users + </md-button-toggle> + <div fxLayout="row" class="pad-left-md"></div> + <md-button-toggle value="workflow" class="uppercase"> + Workflow + </md-button-toggle> + </md-button-toggle-group> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Input</md-card-title> + <md-divider></md-divider> + <md-card-content> + <form> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="Company (disabled)" disabled value="Google"> + </md-input-container> + </div> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <input mdInput disabled placeholder="First name"> + </md-input-container> + <md-input-container flex> + <input mdInput placeholder="Long Last Name That Will Be Truncated"> + </md-input-container> + </div> + <div layout="row" layout-margin> + <div flex fxLayoutAlign="start center"> + <md-input-container flex> + <input mdInput placeholder="Button Addon with dropdown"> + </md-input-container> + <button class="input-button" color="fds-regular" md-raised-button [mdMenuTriggerFor]="inputButtonDropdownAddonMenu"> + Select<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + <md-menu x-position="before" #inputButtonDropdownAddonMenu="mdMenu" [overlapTrigger]="false"> + <button md-menu-item> Refresh </button> + <button md-menu-item> Settings </button> + <button md-menu-item> Help </button> + <button md-menu-item disabled> Sign Out </button> + </md-menu> + </div> + <div flex fxLayoutAlign="start center"> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="Button Addon"> + </md-input-container> + <button class="input-button" color="fds-regular" md-raised-button> + Search + </button> + </div> + </div> + <div layout="row" layout-margin> + <div flex fxLayoutAlign="start center"> + <md-input-container floatPlaceholder="always" flex> + <input disabled mdInput placeholder="Button Addon with dropdown"> + </md-input-container> + <button disabled class="input-button" color="fds-regular" md-raised-button> + Select<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + </div> + <div flex fxLayoutAlign="start center"> + <md-input-container floatPlaceholder="always" flex> + <input disabled mdInput placeholder="Button Addon"> + </md-input-container> + <button disabled class="input-button" color="fds-regular" md-raised-button> + Search + </button> + </div> + </div> + <div layout="row" layout-margin> + <md-input-container flex> + <textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea> + </md-input-container> + </div> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <textarea disabled value="Address 2 Value" mdInput placeholder="Address 2"></textarea> + </md-input-container> + </div> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="City"> + </md-input-container> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="State"> + </md-input-container> + <md-input-container floatPlaceholder="always" flex> + <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043"> + <md-hint align="end">{{postalCode.value.length}} / 5</md-hint> + </md-input-container> + </div> + </form> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <!-- Inputs --> + <form> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="Company (disabled)" disabled value="Google"> + </md-input-container> + </div> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <input mdInput disabled placeholder="First name"> + </md-input-container> + <md-input-container flex> + <input mdInput placeholder="Long Last Name That Will Be Truncated"> + </md-input-container> + </div> + <div layout="row" layout-margin> + <div flex fxLayoutAlign="start center"> + <md-input-container flex> + <input mdInput placeholder="Button Addon with dropdown"> + </md-input-container> + <button class="input-button" color="fds-regular" md-raised-button [mdMenuTriggerFor]="inputButtonDropdownAddonMenu"> + Select<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + <md-menu x-position="before" #inputButtonDropdownAddonMenu="mdMenu" [overlapTrigger]="false"> + <button md-menu-item> Refresh </button> + <button md-menu-item> Settings </button> + <button md-menu-item> Help </button> + <button md-menu-item disabled> Sign Out </button> + </md-menu> + </div> + <div flex fxLayoutAlign="start center"> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="Button Addon"> + </md-input-container> + <button class="input-button" color="fds-regular" md-raised-button> + Search + </button> + </div> + </div> + <div layout="row" layout-margin> + <div flex fxLayoutAlign="start center"> + <md-input-container floatPlaceholder="always" flex> + <input disabled mdInput placeholder="Button Addon with dropdown"> + </md-input-container> + <button disabled class="input-button" color="fds-regular" md-raised-button> + Select<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + </div> + <div flex fxLayoutAlign="start center"> + <md-input-container floatPlaceholder="always" flex> + <input disabled mdInput placeholder="Button Addon"> + </md-input-container> + <button disabled class="input-button" color="fds-regular" md-raised-button> + Search + </button> + </div> + </div> + <div layout="row" layout-margin> + <md-input-container flex> + <textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea> + </md-input-container> + </div> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <textarea disabled value="Address 2 Value" mdInput placeholder="Address 2"></textarea> + </md-input-container> + </div> + <div layout="row" layout-margin> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="City"> + </md-input-container> + <md-input-container floatPlaceholder="always" flex> + <input mdInput placeholder="State"> + </md-input-container> + <md-input-container floatPlaceholder="always" flex> + <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043"> + <md-hint align="end">{{postalCode.value.length}} / 5</md-hint> + </md-input-container> + </div> + </form> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Tabs</md-card-title> + <md-divider></md-divider> + <md-card-content> + <md-tab-group dynamicHeight> + <md-tab> + <ng-template md-tab-label>One</ng-template> + <h3 class="md-title">First tab content</h3> + <p>Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.</p> + </md-tab> + <md-tab> + <ng-template md-tab-label>Two</ng-template> + <h3 class="md-title">Second tab content</h3> + <p>Hashtag distillery skateboard man bun gochujang, salvia man braid art party meggings heirloom kitsch farm-to-table. Franzen beard fingerstache gentrify, heirloom portland ennui XOXO microdosing kitsch plaid. Chicharrones bushwick chia, banh mi irony tattooed hammock butcher shabby chic taxidermy semiotics marfa post-ironic. Blue bottle keffiyeh farm-to-table ennui, chambray pitchfork art party pinterest artisan pop-up. Etsy banjo marfa, blue bottle kombucha crucifix XOXO tousled beard. Tilde disrupt kale chips bicycle rights skateboard master cleanse hella shoreditch, meditation retro shabby chic vice heirloom. Etsy listicle vice actually, iPhone chia hoodie four loko.</p> + </md-tab> + </md-tab-group> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <md-tab-group dynamicHeight> + <md-tab> + <ng-template md-tab-label>First tab content</ng-template> + <h1>First content</h1> + <p>...</p> + </md-tab> + <md-tab> + <ng-template md-tab-label>Second tab content</ng-template> + <h1>Second tab content</h1> + <p>...</p> + </md-tab> + </md-tab-group> + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Autocomplete</md-card-title> + <md-divider></md-divider> + <md-card-content> + <div class="pad-top-sm" layout="row"> + <md-input-container flex="50"> + <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel" (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled"> + </md-input-container> + </div> + <div class="push-top"> + <button md-button (click)="modelDir.reset()" class="text-upper">Reset</button> + <button md-button (click)="currentState='California'" class="text-upper">Set value</button> + <button md-button (click)="tdDisabled=!tdDisabled" class="text-upper">Toggle disabled</button> + </div> + <md-autocomplete #tdAuto="mdAutocomplete"> + <md-option *ngFor="let state of tdStates" [value]="state.name"> + <span>{{ state.name }}</span> + <span class="demo-secondary-text"> ({{state.code}}) </span> + </md-option> + </md-autocomplete> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <div class="pad-top-sm" layout="row"> + <md-input-container flex="50"> + <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel" (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled"> + </md-input-container> + </div> + <div class="push-top"> + <button md-button (click)="modelDir.reset()" class="text-upper">Reset</button> + <button md-button (click)="currentState='California'" class="text-upper">Set value</button> + <button md-button (click)="tdDisabled=!tdDisabled" class="text-upper">Toggle disabled</button> + </div> + <md-autocomplete #tdAuto="mdAutocomplete"> + <md-option *ngFor="let state of tdStates" [value]="state.name"> + <span>{ { state.name } }</span> + <span class="demo-secondary-text"> ({ {state.code} }) </span> + </md-option> + </md-autocomplete> + ]]> + </pre> + <p>Javascript:</p> + <pre lang="javascript"> + <![CDATA[ + this.currentState = ''; + this.reactiveStates = ''; + this.tdStates = []; + this.tdDisabled = false; + this.states = [ + { code: 'AL', name: 'Alabama' }, + { code: 'AK', name: 'Alaska' }, + { code: 'AZ', name: 'Arizona' }, + { code: 'AR', name: 'Arkansas' }, + { code: 'CA', name: 'California' }, + { code: 'CO', name: 'Colorado' }, + { code: 'CT', name: 'Connecticut' }, + { code: 'DE', name: 'Delaware' }, + { code: 'FL', name: 'Florida' }, + { code: 'GA', name: 'Georgia' }, + { code: 'HI', name: 'Hawaii' }, + { code: 'ID', name: 'Idaho' }, + { code: 'IL', name: 'Illinois' }, + { code: 'IN', name: 'Indiana' }, + { code: 'IA', name: 'Iowa' }, + { code: 'KS', name: 'Kansas' }, + { code: 'KY', name: 'Kentucky' }, + { code: 'LA', name: 'Louisiana' }, + { code: 'ME', name: 'Maine' }, + { code: 'MD', name: 'Maryland' }, + { code: 'MA', name: 'Massachusetts' }, + { code: 'MI', name: 'Michigan' }, + { code: 'MN', name: 'Minnesota' }, + { code: 'MS', name: 'Mississippi' }, + { code: 'MO', name: 'Missouri' }, + { code: 'MT', name: 'Montana' }, + { code: 'NE', name: 'Nebraska' }, + { code: 'NV', name: 'Nevada' }, + { code: 'NH', name: 'New Hampshire' }, + { code: 'NJ', name: 'New Jersey' }, + { code: 'NM', name: 'New Mexico' }, + { code: 'NY', name: 'New York' }, + { code: 'NC', name: 'North Carolina' }, + { code: 'ND', name: 'North Dakota' }, + { code: 'OH', name: 'Ohio' }, + { code: 'OK', name: 'Oklahoma' }, + { code: 'OR', name: 'Oregon' }, + { code: 'PA', name: 'Pennsylvania' }, + { code: 'RI', name: 'Rhode Island' }, + { code: 'SC', name: 'South Carolina' }, + { code: 'SD', name: 'South Dakota' }, + { code: 'TN', name: 'Tennessee' }, + { code: 'TX', name: 'Texas' }, + { code: 'UT', name: 'Utah' }, + { code: 'VT', name: 'Vermont' }, + { code: 'VA', name: 'Virginia' }, + { code: 'WA', name: 'Washington' }, + { code: 'WV', name: 'West Virginia' }, + { code: 'WI', name: 'Wisconsin' }, + { code: 'WY', name: 'Wyoming' }, + ]; + + ... + + displayFn: function(value) { + return value && typeof value === 'object' ? value.name : value; + }, + + filterStates: function(val) { + return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states; + }, + + ... + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Chips</md-card-title> + <md-divider></md-divider> + <md-card-content> + <h3 class="md-title">Chips (with colors)</h3> + <md-chip-list> + <md-chip *ngFor="let chip of chips" [selected]="chip.selected" color="{{chip.color}}"> + {{chip.name}}<i class="fa fa-times" aria-hidden="true"></i> + </md-chip> + </md-chip-list> + <md-divider class="push-top push-bottom"></md-divider> + <h3 class="md-title">Chip Stacked (with colors)</h3> + <div layout-gt-xs="row"> + <md-chip-list flex-gt-xs="50" class="mat-chip-list-stacked"> + <md-chip *ngFor="let chip of chips" [selected]="chip.selected" color="{{chip.color}}"> + {{chip.name}}<i class="fa fa-times" aria-hidden="true"></i> + </md-chip> + </md-chip-list> + </div> + <h3 class="md-title">Usage</h3> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <md-chip-list> + <md-chip *ngFor="let chip of chips" [selected]="chip.selected" color="{ {chip.color} }"> + { {chip.name} }<i class="fa fa-times" aria-hidden="true"></i> + </md-chip> + </md-chip-list> + ]]> + </pre> + <p>Javascript:</p> + <pre lang="javascript"> + <![CDATA[ + chips: [ + { name: 'Default', color: '', selected: false }, + { name: 'Default (selected)', color: '', selected: true }, + { name: 'Primary', color: 'primary', selected: false }, + { name: 'Primary (selected)', color: 'primary', selected: true }, + { name: 'Accent', color: 'accent', selected: false }, + { name: 'Accent (selected)', color: 'accent', selected: true }, + { name: 'Warn', color: 'warn', selected: false }, + { name: 'Warn (selected)', color: 'warn', selected: true }, + ]; + ]]> + </pre> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Filter</md-card-title> + <md-divider></md-divider> + <md-card-content> + <h3 class="md-title">Autocomplete with chips and no custom inputs</h3> + <md-divider class="push-top push-bottom"></md-divider> + <md-tab-group md-stretch-tabs dynamicHeight> + <md-tab> + <ng-template md-tab-label>Demo</ng-template> + <div class="push"> + <div class="md-body-1">Type and select a preset option:</div> + <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips> + </div> + </md-tab> + <md-tab> + <ng-template md-tab-label>Code</ng-template> + <md-card-content> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips> + ]]> + </pre> + <p>Javascript:</p> + <pre lang="javascript"> + <![CDATA[ + this.readOnly = false; + + this.items = [ + 'stepper', + 'expansion-panel', + 'markdown', + 'highlight', + 'loading', + 'media', + 'chips', + 'http', + 'json-formatter', + 'pipes', + 'need more?', + ]; + + this.itemsRequireMatch = this.items.slice(0, 6); + + ... + + toggleReadOnly: function() { + this.readOnly = !this.readOnly; + }, + + ... + ]]> + </pre> + </md-card-content> + </md-tab> + </md-tab-group> + <md-divider></md-divider> + <md-card-actions> + <button md-button color="primary" (click)="toggleReadOnly()" class="text-upper">Toggle ReadOnly</button> + </md-card-actions> + </md-card-content> + <md-card-content> + <h3 class="md-title">Autocomplete with custom inputs</h3> + <md-divider class="push-top push-bottom"></md-divider> + <md-tab-group md-stretch-tabs dynamicHeight> + <md-tab> + <ng-template md-tab-label>Demo</ng-template> + <div class="push"> + <div class="md-body-1">Type and select option or enter custom text and press enter:</div> + <td-chips [items]="items" placeholder="Enter any string"></td-chips> + </div> + </md-tab> + <md-tab> + <ng-template md-tab-label>Code</ng-template> + <md-card-content> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <td-chips [items]="items" placeholder="Enter any string"></td-chips> + ]]> + </pre> + <p>Javascript:</p> + <pre lang="javascript"> + <![CDATA[ + this.items = [ + 'stepper', + 'expansion-panel', + 'markdown', + 'highlight', + 'loading', + 'media', + 'chips', + 'http', + 'json-formatter', + 'pipes', + 'need more?', + ]; + ]]> + </pre> + </md-card-content> + </md-tab> + </md-tab-group> + </md-card-content> + <md-card-content> + <h3 class="md-title">Demo allowing custom inputs for tags</h3> + <md-divider class="push-top push-bottom"></md-divider> + <md-tab-group md-stretch-tabs dynamicHeight> + <md-tab> + <ng-template md-tab-label>Demo</ng-template> + <div class="push"> + <div class="md-body-1">Type any test and press enter:</div> + <td-chips placeholder="Enter any string"></td-chips> + </div> + </md-tab> + <md-tab> + <ng-template md-tab-label>Code</ng-template> + <md-card-content> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <td-chips placeholder="Enter any string"></td-chips> + ]]> + </pre> + </md-card-content> + </md-tab> + </md-tab-group> + </md-card-content> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Searchable/Filterable Expansion Panels</md-card-title> + <md-divider></md-divider> + <md-card-content> + <md-tab-group md-stretch-tabs> + <md-tab> + <ng-template md-tab-label>Demo</ng-template> + <div class="pad-top-md pad-bottom-md pad-right-xxl pad-left-xxl"> + <div class="pad-top-md pad-bottom-sm"> + <md-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple> + <md-button-toggle (change)="toggleDropletsFilter('type:asset')" [checked]="isDropletFilterChecked('type:asset')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletTypeCount('asset')}}</div> + <div class="pad-top-sm" fxFlex="45">Assets</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('type:extension')" [checked]="isDropletFilterChecked('type:extension')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletTypeCount('extension')}}</div> + <div class="pad-top-sm" fxFlex="45">Extensions</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('type:flow')" [checked]="isDropletFilterChecked('type:flow')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletTypeCount('flow')}}</div> + <div class="pad-top-sm" fxFlex="45">Flows</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('compliant.label:Compliant')" [checked]="isDropletFilterChecked('compliant.label:Compliant')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('compliant')}}</div> + <div class="pad-top-sm" fxFlex="45">Compliant</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('fleet.label:Fleet')" [checked]="isDropletFilterChecked('fleet.label:Fleet')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('fleet')}}</div> + <div class="pad-top-sm" fxFlex="45">Fleet</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('prod.label:Production Ready')" [checked]="isDropletFilterChecked('prod.label:Production Ready')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('prod')}}</div> + <div class="pad-top-sm" fxFlex="45">Production Ready</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('secure.label:Secure')" [checked]="isDropletFilterChecked('secure.label:Secure')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{{getDropletCertificationCount('secure')}}</div> + <div class="pad-top-sm" fxFlex="45">Secure</div> + </div> + </md-button-toggle> + </md-button-toggle-group> + <div id="nf-registry-droplet-filter-clear-grouping-button-container"> + <span *ngIf="dropletsSearchTerms.length > 0" (click)="dropletsSearchTerms = [];filterDroplets(activeColumn.name, activeColumn.sortOrder);"><i class="fa fa-plus-circle fa-rotate-45" aria-hidden="true"></i><span class="pad-left-sm link">Clear Grouping</span></span> + </div> + </div> + <div layout="row" layout-align="space-between center"> + <div flex fxLayout="row" fxLayoutAlign="end center"> + <td-chips [(ngModel)]="dropletsSearchTerms" [items]="autoCompleteDroplets" (add)="dropletsSearchAdd($event)" (remove)="dropletsSearchRemove($event)" class="push-right-sm"></td-chips> + <span class="pad-right-sm">Sort by:</span> + <button color="fds-primary" md-raised-button [mdMenuTriggerFor]="dropletGridSortMenu"> + {{getSortBy()}}<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + </div> + <md-menu class="fds-primary-dropdown-button-menu" #dropletGridSortMenu="mdMenu" [overlapTrigger]="false"> + <div *ngFor="let column of dropletColumns"> + <button md-menu-item *ngIf="column.sortable" (click)="sortDroplets($event, column);">{{column.label}} {{(column.sortOrder === 'ASC') ? 'DESC' : 'ASC'}}</button> + </div> + </md-menu> + </div> + </div> + <div class="pad-right-xxl pad-left-xxl"> + <div *ngFor="let droplet of filteredDroplets"> + <td-expansion-panel class="mat-elevation-z5" label={{droplet.label}} sublabel={{droplet.sublabel}} [disabled]="disabled"> + <ng-template td-expansion-panel-label> + <div fxLayout="column" fxLayoutAlign="space-between start"> + <span class="md-title capitalize">{{droplet.displayName}}</span> + <span class="md-subhead">{{droplet.type}}</span> + </div> + </ng-template> + <ng-template td-expansion-panel-sublabel> + <div fxLayout="row" fxLayoutAlign="space-between center"> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Versions</span> {{droplet.versions.length}} + </div> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Flows</span> {{droplet.flows.length}} + </div> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Extensions</span> {{droplet.extensions.length}} + </div> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Assests</span> {{droplet.assets.length}} + </div> + </div> + </ng-template> + <div class="md-padding"> + <div fxLayout="column" fxLayoutAlign="space-between stretch"> + <div class="pad-bottom-sm" fxLayout="row" fxLayoutAlign="end center"> + <button color="fds-primary" [mdMenuTriggerFor]="primaryButtonDropdownMenu" md-raised-button> + Actions<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + <md-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="mdMenu" [overlapTrigger]="false"> + <button md-menu-item *ngFor="let action of droplet.actions"> + <span>{{action.name}}</span> + </button> + </md-menu> + </div> + <div fxLayout="row"> + <div fxFlex="25"> + <span class="uppercase">Description</span> + <p>Blah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah bla</p> + </div> + <div fxFlex="50"> + <md-card fxFlex> + <md-card-content class="pad-top-sm"> + <img src="{{droplet.img}}"> + </md-card-content> + </md-card> + </div> + <div fxFlex="25"> + <span class="uppercase">Change Log</span> + </div> + </div> + </div> + </div> + </td-expansion-panel> + <div class="pad-bottom-sm"></div> + </div> + </div> + </md-tab> + <md-tab> + <ng-template md-tab-label>Code</ng-template> + <p>HTML:</p> + <pre lang="html"> + <![CDATA[ + <div class="pad-top-md pad-bottom-md pad-right-xxl pad-left-xxl"> + <div class="pad-top-md pad-bottom-sm"> + <md-button-toggle-group fxLayout="row" fxLayoutAlign="space-between center" class="expansion-panel-filter-toggle-group" multiple> + <md-button-toggle (change)="toggleDropletsFilter('type:asset')" [checked]="isDropletFilterChecked('type:asset')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletTypeCount('asset')} }</div> + <div class="pad-top-sm" fxFlex="45">Assets</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('type:extension')" [checked]="isDropletFilterChecked('type:extension')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletTypeCount('extension')} }</div> + <div class="pad-top-sm" fxFlex="45">Extensions</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('type:flow')" [checked]="isDropletFilterChecked('type:flow')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletTypeCount('flow')} }</div> + <div class="pad-top-sm" fxFlex="45">Flows</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('compliant.label:Compliant')" [checked]="isDropletFilterChecked('compliant.label:Compliant')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('compliant')} }</div> + <div class="pad-top-sm" fxFlex="45">Compliant</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('fleet.label:Fleet')" [checked]="isDropletFilterChecked('fleet.label:Fleet')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('fleet')} }</div> + <div class="pad-top-sm" fxFlex="45">Fleet</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('prod.label:Production Ready')" [checked]="isDropletFilterChecked('prod.label:Production Ready')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('prod')} }</div> + <div class="pad-top-sm" fxFlex="45">Production Ready</div> + </div> + </md-button-toggle> + <md-button-toggle (change)="toggleDropletsFilter('secure.label:Secure')" [checked]="isDropletFilterChecked('secure.label:Secure')"> + <div fxFlex fxLayout="column" fxLayoutAlign="space-around stretch"> + <div class="md-display-1 pad-top-sm" fxFlex="55">{ {getDropletCertificationCount('secure')} }</div> + <div class="pad-top-sm" fxFlex="45">Secure</div> + </div> + </md-button-toggle> + </md-button-toggle-group> + <button *ngIf="activeColumn" md-button color="primary" (click)="dropletsSearchTerms = [];filterDroplets(activeColumn.name, activeColumn.sortOrder);">Clear Grouping</button> + </div> + <div layout="row" layout-align="space-between center"> + <div flex fxLayout="row" fxLayoutAlign="end center"> + <td-chips [(ngModel)]="dropletsSearchTerms" [items]="autoCompleteDroplets" (add)="dropletsSearchAdd($event)" (remove)="dropletsSearchRemove($event)" class="push-right-sm"></td-chips> + <span class="pad-right-sm">Sort by:</span> + <button color="fds-primary" md-raised-button [mdMenuTriggerFor]="dropletGridSortMenu"> + { {getSortBy()} }<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + </div> + <md-menu class="fds-primary-dropdown-button-menu" #dropletGridSortMenu="mdMenu" [overlapTrigger]="false"> + <div *ngFor="let column of dropletColumns"> + <button md-menu-item *ngIf="column.sortable" (click)="sortDroplets($event, column);">{ {column.label} } { {(column.sortOrder === 'ASC') ? 'DESC' : 'ASC'} }</button> + </div> + </md-menu> + </div> + </div> + <div class="pad-right-xxl pad-left-xxl"> + <div *ngFor="let droplet of filteredDroplets"> + <td-expansion-panel class="mat-elevation-z5" label={ {droplet.label} } sublabel={ {droplet.sublabel} } [disabled]="disabled"> + <ng-template td-expansion-panel-label> + <div fxLayout="column" fxLayoutAlign="space-between start"> + <span class="md-title capitalize">{ {droplet.displayName} }</span> + <span class="md-subhead">{ {droplet.type} }</span> + </div> + </ng-template> + <ng-template td-expansion-panel-sublabel> + <div fxLayout="row" fxLayoutAlign="space-between center"> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Versions</span> { {droplet.versions.length} } + </div> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Flows</span> { {droplet.flows.length} } + </div> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Extensions</span> { {droplet.extensions.length} } + </div> + <div class="pad-right-xxl pad-left-xxl" fxLayout="column" fxLayoutAlign="space-between start"> + <span class="uppercase">Assests</span> { {droplet.assets.length} } + </div> + </div> + </ng-template> + <div class="md-padding"> + <div fxLayout="column" fxLayoutAlign="space-between stretch"> + <div class="pad-bottom-sm" fxLayout="row" fxLayoutAlign="end center"> + <button color="fds-primary" [mdMenuTriggerFor]="primaryButtonDropdownMenu" md-raised-button> + Actions<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + <md-menu class="fds-primary-dropdown-button-menu" #primaryButtonDropdownMenu="mdMenu" [overlapTrigger]="false"> + <button md-menu-item *ngFor="let action of droplet.actions"> + <span>{ {action.name} }</span> + </button> + </md-menu> + </div> + <div fxLayout="row"> + <div fxFlex="25"> + <span class="uppercase">Description</span> + <p>Blah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah blaBlah blah bla, bla bla, blah blah bla</p> + </div> + <div fxFlex="50"> + <md-card fxFlex> + <md-card-content class="pad-top-sm"> + <img src="{ {droplet.img} }"> + </md-card-content> + </md-card> + </div> + <div fxFlex="25"> + <span class="uppercase">Change Log</span> + </div> + </div> + </div> + </div> + </td-expansion-panel> + <div class="pad-bottom-sm"></div> + </div> + </div> + ]]> + </pre> + <p>Javascript:</p> + <pre lang="javascript"> + <![CDATA[ + this.dataTableService = TdDataTableService; + + this.droplets = [{ + id: '23f6cc59-0156-1000-09b4-2b0610089090', + name: "Decompression_Circular_Flow", + displayName: 'Decompressed Circular flow', + type: 'flow', + sublabel: 'A sublabel', + compliant: { + id: '25fd6vv87-3549-0001-05g6-4d4567890765', + label: 'Compliant', + type: 'certification' + }, + fleet: { + id: '23f6cc59-3549-0001-05g6-4d4567890765', + label: 'Fleet', + type: 'certification' + }, + prod: { + id: '52fd6vv87-3549-0001-05g6-4d4567890765', + label: 'Production Ready', + type: 'certification' + }, + secure: { + id: '32f6cc59-3549-0001-05g6-4d4567890765', + label: 'Secure', + type: 'certification' + }, + versions: [{ + id: '23f6cc59-0156-1000-06b4-2b0810089090', + revision: '1', + dependentFlows: [{ + id: '25fd6vv87-3549-0001-05g6-4d4567890765' + }], + created: date.setDate(date.getDate() - 1), + updated: new Date() + }, { + id: '25fd6vv87-3549-0001-05g6-4d4567890765', + revision: '2', + dependentFlows: [{ + id: '23f6cc59-0156-1000-06b4-2b0810089090' + }], + created: new Date(), + updated: new Date() + }], + flows: [], + extensions: [], + assets: [], + actions: [{ + 'name': 'Delete', + 'icon': 'fa fa-close', + 'tooltip': 'Delete User' + }, { + 'name': 'Manage', + 'icon': 'fa fa-user', + 'tooltip': 'Manage User' + }, { + 'name': 'Action 3', + 'icon': 'fa fa-question', + 'tooltip': 'Whatever else we want to do...' + }] + }, { + id: '25fd6vv87-3249-0001-05g6-4d4767890765', + name: "DateConversion", + displayName: 'Date conversion', + type: 'asset', + sublabel: 'A sublabel', + compliant: { + id: '25fd6vv34-3549-0001-05g6-4d4567890765', + label: 'Compliant', + type: 'certification' + }, + prod: { + id: '52vn6vv87-3549-0001-05g6-4d4567890765', + label: 'Production Ready', + type: 'certification' + }, + versions: [{ + id: '23f6ic59-0156-1000-06b4-2b0810089090', + revision: '1', + dependentFlows: [{ + id: '23f6cc19-0156-1000-06b4-2b0810089090' + }], + created: new Date(), + updated: new Date() + }], + flows: [], + extensions: [], + assets: [], + actions: [{ + 'name': 'Delete', + 'icon': 'fa fa-close', + 'tooltip': 'Delete User' + }] + }, { + id: '52fd6vv87-3294-0001-05g6-4d4767890765', + name: "nifi-email-bundle", + displayName: 'nifi-email-bundle', + type: 'extension', + sublabel: 'A sublabel', + compliant: { + id: '33fd6vv87-3549-0001-05g6-4d4567890765', + label: 'Compliant', + test: { + label: 'test' + }, + type: 'certification' + }, + versions: [{ + id: '23d3cc59-0156-1000-06b4-2b0810089090', + revision: '1', + dependentFlows: [{ + id: '23f6cc89-0156-1000-06b4-2b0810089090' + }], + created: new Date(), + updated: new Date() + }], + flows: [], + extensions: [], + assets: [], + actions: [{ + 'name': 'Delete', + 'icon': 'fa fa-close', + 'tooltip': 'Delete User' + }, { + 'name': 'Manage', + 'icon': 'fa fa-user', + 'tooltip': 'Manage User' + }, ] + }]; + + this.filteredDroplets = []; + + this.dropletColumns = [ + { name: 'id', label: 'ID', sortable: true }, + { name: 'name', label: 'Name', sortable: true }, + { name: 'displayName', label: 'Display Name', sortable: true }, + { name: 'sublabel', label: 'Label', sortable: true }, + { name: 'type', label: 'Type', sortable: true } + ]; + + this.autoCompleteDroplets = []; + this.dropletsSearchTerms = []; + + ... + + isDropletFilterChecked: function(term) { + return (this.dropletsSearchTerms.indexOf(term) > -1); + }, + + getDropletTypeCount: function(type) { + return this.filteredDroplets.filter(function(droplet) { + return droplet.type === type; + }).length; + }, + + getDropletCertificationCount: function(certification) { + return this.filteredDroplets.filter(droplet => { + return Object.keys(droplet).find((key) => { + if (key === certification && droplet[certification].type === 'certification') { + return droplet; + } + }); + }).length; + }, + + getSortBy: function() { + var sortByColumnLabel; + var arrayLength = this.dropletColumns.length; + for (var i = 0; i < arrayLength; i++) { + if (this.dropletColumns[i].active === true) { + sortByColumnLabel = this.dropletColumns[i].label; + break; + } + } + return sortByColumnLabel; + }, + + sortDroplets: function(sortEvent, column) { + if (column.sortable === true) { + // toggle column sort order + var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC'; + this.filterDroplets(column.name, sortOrder); + this.activeColumn = column; + //only one column can be actively sorted so we reset all to inactive + this.dropletColumns.forEach(c => c.active = false); + //and set this column as the actively sorted column + column.active = true; + } + }, + + dropletsSearchRemove: function(searchTerm) { + this.filterDroplets(this.activeColumn.name, this.activeColumn.sortOrder); + }, + + dropletsSearchAdd: function(searchTerm) { + this.filterDroplets(this.activeColumn.name, this.activeColumn.sortOrder); + }, + + toggleDropletsFilter: function(searchTerm) { + var applySearchTerm = true; + // check if the search term is already applied and remove it if true + if (this.dropletsSearchTerms.length > 0) { + var arrayLength = this.dropletsSearchTerms.length; + for (var i = 0; i < arrayLength; i++) { + var index = this.dropletsSearchTerms.indexOf(searchTerm); + if (index > -1) { + this.dropletsSearchTerms.splice(index, 1); + applySearchTerm = false; + } + } + } + + // if we just removed the search term do NOT apply it again + if (applySearchTerm) { + this.dropletsSearchTerms.push(searchTerm); + } + + this.filterDroplets(this.activeColumn.name, this.activeColumn.sortOrder); + }, + + filterDroplets: function(sortBy, sortOrder) { + // if `sortBy` is `undefined` then find the first sortable column in this.dropletColumns + if (sortBy === undefined) { + var arrayLength = this.dropletColumns.length; + for (var i = 0; i < arrayLength; i++) { + if (this.dropletColumns[i].sortable === true) { + sortBy = this.dropletColumns[i].name; + this.activeColumn = this.dropletColumns[i]; + //only one column can be actively sorted so we reset all to inactive + this.dropletColumns.forEach(c => c.active = false); + //and set this column as the actively sorted column + this.dropletColumns[i].active = true; + break; + } + } + } + + // if `sortOrder` is `undefined` then use 'ASC' + if (sortOrder === undefined) { + sortOrder = 'ASC' + } + + var newData = this.droplets; + + for (var i = 0; i < this.dropletsSearchTerms.length; i++) { + newData = this.filterData(newData, this.dropletsSearchTerms[i], true, this.activeColumn.name); + } + + newData = this.dataTableService.sortData(newData, sortBy, sortOrder); + this.filteredDroplets = newData; + this.getAutoCompleteDroplets(); + }, + + getAutoCompleteDroplets: function() { + this.autoCompleteDroplets = []; + this.dropletColumns.forEach(c => this.filteredDroplets.forEach(r => (r[c.name.toLowerCase()]) ? this.autoCompleteDroplets.push(r[c.name.toLowerCase()].toString()) : '')); + }, + + filterData: function(data, searchTerm, ignoreCase) { + var field = ''; + if (searchTerm.indexOf(":") > -1) { + field = searchTerm.split(':')[0].trim(); + searchTerm = searchTerm.split(':')[1].trim(); + } + var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : ''; + + if (filter) { + data = data.filter(item => { + var res = Object.keys(item).find((key) => { + if (field.indexOf(".") > -1) { + var objArray = field.split("."); + var obj = item; + var arrayLength = objArray.length; + for (var i = 0; i < arrayLength; i++) { + try { + obj = obj[objArray[i]]; + } catch (e) { + return false; + } + } + var preItemValue = ('' + obj); + var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue; + return itemValue.indexOf(filter) > -1; + } else { + if (key !== field && field !== '') { + return false; + } + var preItemValue = ('' + item[key]); + var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue; + return itemValue.indexOf(filter) > -1; + } + }); + return !(typeof res === 'undefined'); + }); + } + return data; + }, + + ... + ]]> + </pre> + </md-tab> + </md-tab-group> + </md-card-content> + <md-divider class="pad-bottom-sm"></md-divider> + </md-card> + <md-card> + <md-card-title class="pad-bottom-sm">Table</md-card-title> + <md-divider></md-divider> + <md-card-content> + <p>Example table with: Paging Bar / Filter / Sortable Columns / Multi-select with available Actions</p> + <md-tab-group md-stretch-tabs> + <md-tab> + <ng-template md-tab-label>Demo</ng-template> + <div layout="row" layout-align="space-between center" class="pad-top-md pad-bottom-sm pad-left-md pad-right-md"> + <span class="table-title"> + <span>Table title</span> + </span> + <div flex class="push-right-sm" fxLayout="row" fxLayoutAlign="end center"> + <td-chips [items]="autoCompleteData" (add)="searchAdd($event)" (remove)="searchRemove($event)"></td-chips> + <button color="fds-primary" md-raised-button [mdMenuTriggerFor]="dataTableActionMenu"> + Actions<i class="fa fa-caret-down" aria-hidden="true"></i> + </button> + </div> + <md-menu class="fds-primary-dropdown-button-menu" #dataTableActionMenu="mdMenu" [overlapTrigger]="false"> + <button md-menu-item> Option 1 </button> + <button md-menu-item> Option 2 </button> + </md-menu> + </div> + <div class="pad-left-md pad-right-md"> + <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table"> + <div class="td-data-table-column" (click)="sort($event, column)" [mdTooltip]="column.tooltip" *ngFor="let column of columns" fxFlex="{{column.width}}"> + {{column.label}} + <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up" aria-hidden="true"></i> + <i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down" aria-hidden="true"></i> + </div> + <div class="td-data-table-column" fxFlex=10> + <div fxLayout="row" fxLayoutAlign="end center"> + <md-checkbox class="pad-left-sm" [(ngModel)]="allRowsSelected" (checked)="allRowsSelected" (change)="toggleSelectAll()"></md-checkbox> + </div> + </div> + </div> + <div> + <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row" [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredData" (click)="row.checked = !row.checked;toggleSelect(row)"> + <div class="td-data-table-cell" *ngFor="let column of columns" fxFlex="{{column.width}}"> + <div *ngIf="column.name !== 'comments' || row['comments']"> + {{column.format ? column.format(row[column.name]) : row[column.name]}} + </div> + </div> + <div class="td-data-table-cell" fxFlex=10> + <div *ngIf="row.actions"> + <div *ngIf="row.actions.length <= 4" fxLayout="row" fxLayoutAlign="end center"> + <button (click)="row.checked = !row.checked" *ngFor="let action of row.actions" mdTooltip="{{action.tooltip}}" md-icon-button color="accent" [disabled]="action.disabled ? '' : null"> + <i class="{{action.icon}}" aria-hidden="true"></i> + </button> + <md-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></md-checkbox> + </div> + <div *ngIf="row.actions.length > 4" fxLayout="row" fxLayoutAlign="end center"> + <button (click)="row.checked = !row.checked" mdTooltip="Actions" md-icon-button color="accent" [mdMenuTriggerFor]="tableActionMenu"> + <i class="fa fa-ellipsis-h" aria-hidden="true"></i> + </button> + <md-menu #tableActionMenu="mdMenu" [overlapTrigger]="false"> + <button *ngFor="let action of row.actions" mdTooltip="{{action.tooltip}}" md-menu-item [disabled]="action.disabled ? '' : null"> + <i class="{{action.icon}}" aria-hidden="true"></i> + <span>{{action.name}}</span> + </button> + </md-menu> + <md-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked" (change)="toggleSelect(row)" (click)="row.checked = !row.checked;toggleSelect(row)"></md-checkbox> + </div> + </div> + <div *ngIf="!row.actions" fxLayout="row" fxLayoutAlign="end center"> + <md-checkbox class="pad
<TRUNCATED>
