<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width"> <title>@wealthsimple/angular-directives demo page</title> <script src=https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js></script> <link rel=stylesheet href=https://unpkg.com/@wealthsimple/fabric@3.1.0> <link rel=stylesheet href=https://unpkg.com/angularjs-datepicker@2.1.23/dist/angular-datepicker.min.css> <script src=https://unpkg.com/jquery@3.2.1/dist/jquery.js></script> <script src=https://unpkg.com/angular@1.6.5/angular.js></script> <script src=https://unpkg.com/@uirouter/angularjs@1.0.3/release/angular-ui-router.js></script> <script src=https://unpkg.com/angular-animate@1.6.5/angular-animate.js></script> <script src=https://unpkg.com/angular-translate@2.11.0/dist/angular-translate.js></script> <script src=https://unpkg.com/moment@2.18.1></script> <script src=https://unpkg.com/angularjs-datepicker@2.1.23/dist/angular-datepicker.min.js></script> <script src=https://unpkg.com/angular-messages@1.6.6/angular-messages.min.js></script> <style>body{padding:20px}.code,.preview{margin:10px;padding:10px;border:1px solid #eee;border-radius:10px;position:relative;padding-top:40px}.subexample{padding:10px}.subexample h5{padding-bottom:5px}.font-30{font-size:30px}.code{padding:0;overflow-x:scroll}.code::before,.preview::before{background-color:#f5f5f5;color:#9da0a4;border-radius:10px 0 10px 0;font-weight:700;position:absolute;top:0;left:0;padding:7px}.preview.invert::before{background-color:#fff}.preview.invert{background-color:#f9f8f7}.preview::before{content:'Example'}.code.controller::before{content:'Controller'}.code.dom::before{content:'DOM'}.card-loading-indicator-preview{background-color:#faf7f5}.card-loading-indicator-card-readiness-indicator{padding:15px 5px;font-size:24px}.card-loading-indicator-example-content{height:150px;display:flex;align-items:center;justify-content:center}.responsive-progress-checkmark{display:block;width:60px}@font-face{font-family:FuturaBT-Light;src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Light.eot);src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Light.eot?#iefix) format('embedded-opentype'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Light.woff2) format('woff2'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Light.woff) format('woff'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Light.ttf) format('truetype')}@font-face{font-family:FuturaBT-Book;src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Book.eot);src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Book.eot?#iefix) format('embedded-opentype'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Book.woff2) format('woff2'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Book.woff) format('woff'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Book.ttf) format('truetype')}@font-face{font-family:FuturaBT-Heavy;src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Heavy.eot);src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Heavy.eot?#iefix) format('embedded-opentype'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Heavy.woff2) format('woff2'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Heavy.woff) format('woff'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/FuturaBT-Heavy.ttf) format('truetype')}@font-face{font-family:CaslonGraD;src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/CaslonGraD.eot);src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/CaslonGraD.eot?#iefix) format('embedded-opentype'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/CaslonGraD.woff2) format('woff2'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/CaslonGraD.woff) format('woff'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/CaslonGraD.ttf) format('truetype')}@font-face{font-family:SSSocialCircle;src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/SSSocialCircle.eot);src:url(https://d1p4wrw087wab3.cloudfront.net/fonts/SSSocialCircle.eot?#iefix) format('embedded-opentype'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/SSSocialCircle.woff) format('woff'),url(https://d1p4wrw087wab3.cloudfront.net/fonts/SSSocialCircle.ttf) format('truetype')}.carousel-demo-section{background:#faf7f5;padding:50px;max-width:500px}.carousel-slide{height:440px;border-radius:3px;color:#fff;background:#3c8280;position:relative}.carousel-slide button{background:#fff;border-radius:10px;color:#3c8280;font-size:96px;margin-left:auto;margin-right:auto;display:block;transform:translateY(90%);padding:20px;border:solid #fff 5px}.carousel-slide button:focus{outline:0}.carousel-slide button:hover{outline:0;opacity:.8}.carousel-slide button:active{outline:0;background:#3c8280;color:#fff;opacity:1}</style> <link href="ws-directives.css" rel="stylesheet"></head> <body ng-app=myApp ng-controller=myCtrl ng-cloak> <div> <h3>Autogrowing Inputs</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.autogrowCurrencyValue = 1111; $scope.autogrowCurrencyPencilValue = 567; $scope.autogrowNumberValue = 30; $scope.autogrowTextValue = 'Leeroy Jenkins'; </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <input ws-currency="{autogrow: true, integer:true}" ng-model=autogrowCurrencyValue> <input ws-currency="{autogrow: true, integer:true, symbol:'£' }" ng-model=autogrowCurrencyValue> <input ws-currency="{autogrow: true, integer:true, currencyIsoCode:'EUR' }" ng-model=autogrowCurrencyValue> <input ws-currency="{autogrow: true, integer:true}" show-pencil ng-model=autogrowCurrencyPencilValue> <input autogrow-input type=number ng-model=autogrowNumberValue> <input autogrow-input show-pencil type=text ng-model=autogrowTextValue ng-trim=false> </xmp> </div> <div class=preview> <div> <pre>
            $scope.autogrowCurrencyValue = {{autogrowCurrencyValue}};
            $scope.autogrowCurrencyPencilValue = {{autogrowCurrencyPencilValue}};
            $scope.autogrowNumberValue = {{autogrowNumberValue}};
            $scope.autogrowTextValue = {{autogrowTextValue}};
          </pre> </div> <div class=subexample> <h5>Autogrow currency input</h5> <div> <input ws-currency="{autogrow: true, integer:true}" type=text ng-model=autogrowCurrencyValue> <span>expected income</span> </div> </div> <div class=subexample> <h5>Autogrow currency input (with currency symbol)</h5> <div> <input ws-currency="{autogrow: true, integer:true, symbol:'£' }" ng-model=autogrowCurrencyValue> </div> </div> <div class=subexample> <h5>Autogrow currency input (with currency ISO code)</h5> <div> <input ws-currency="{autogrow: true, integer:true, currencyIsoCode:'EUR' }" ng-model=autogrowCurrencyValue> </div> </div> <div class=subexample> <h5>Autogrow currency input (with pencil icon)</h5> <div> <span>Expected cost:</span> <input ws-currency="{autogrow: true, integer:true}" type=text show-pencil ng-model=autogrowCurrencyValue> </div> </div> <div class=subexample> <h5>Autogrow number input</h5> <div> <input autogrow-input type=number ng-model=autogrowNumberValue class=font-30> <span class=font-30> years old</span> </div> </div> <div class=subexample> <h5>Autogrow text input</h5> <div> <span class=font-30>My name is </span> <input autogrow-input show-pencil type=text ng-model=autogrowTextValue class=font-30 ng-trim=false> </div> </div> </div> </div> <div> <h3>Currency Input</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.currencyValue1 = 111; $scope.currencyValue2 = 222; $scope.currencyValue3 = 333; $scope.currencyValue4 = 444; $scope.currencyValue5 = 555; $scope.currencyValue6 = 666; </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <input ws-currency> <input ws-currency ng-model=currencyValue1> <input ws-currency={integer:true} ng-model=currencyValue2> <input ws-currency ng-model=currencyValue3 ng-change="log('change');"> <input ws-currency ng-model=currencyValue3 ng-focus="log('currency focused')"> <input ws-currency ng-model=currencyValue3 ng-blur="log('currency blurred')"> <input ws-currency="{clearOnInitialFocus: true}" ng-model=currencyValue3> <div ng-class="{ 'has-error' : (testFormCents.fourCharCurrency.$touched && testFormCents.fourCharCurrency.$invalid) }"> <form name=testFormCents method=post novalidate> <input ws-currency name=fourCharCurrency ng-pattern=/^[.13579]*$/ ng-model=currencyValue4> </form> </div> <div ng-class="{ 'has-error' : (testFormNoCents.fourCharCurrency.$touched && testFormNoCents.fourCharCurrency.$invalid) }"> <form name=testFormNoCents method=post novalidate> <input ws-currency integer=true name=fourCharCurrency maxlength=4 ng-model=currencyValue5> </form> </div> <input ws-currency="{min: 1, max: 1000}" integer=true name=minMax ng-model=currencyValue6> </xmp> </div> <div class=preview> <div> <pre>
            $scope.currencyValue1 = {{currencyValue1}};
            $scope.currencyValue2 = {{currencyValue2}};
            $scope.currencyValue3 = {{currencyValue3}};
            $scope.currencyValue4 = {{currencyValue4}};
            $scope.currencyValue5 = {{currencyValue5}};
            $scope.currencyValue6 = {{currencyValue6}};
          </pre> </div> <span>Default currency input no value</span> <input ws-currency> <span>Default currency input with cents</span> <input ws-currency type=text ng-model=currencyValue1> <span>Default currency input integers only (no cents)</span> <input ws-currency={integer:true} ng-model=currencyValue2> <span>Disabled default currency input integers only (no cents)</span> <input ws-currency="{integer: true}" ng-disabled=true ng-model=currencyValue2> <span>Currency input with ng-change event</span> <input ws-currency ng-model=currencyValue3 ng-change="log('currency change');"> <span>Currency input with ngFocus event</span> <input ws-currency ng-model=currencyValue3 ng-focus="log('currency focused')"> <span>Currency input with ngBlur event</span> <input ws-currency ng-model=currencyValue3 ng-blur="log('currency blurred')"> <span>Currency input with clearOnInitialFocus set to true</span> <input ws-currency="{clearOnInitialFocus: true}" ng-model=currencyValue3> <span>Currency input with custom validation odd digits only</span> <div ng-class="{ 'has-error' : (testFormNoCents.fourCharCurrency.$touched && testFormNoCents.fourCharCurrency.$invalid) }"> <form name=testFormNoCents method=post novalidate> <input ws-currency name=fourCharCurrency ng-pattern=/^[.13579]*$/ ng-model=currencyValue4> </form> </div> <span>Currency input with custom validation Max 4 Chars (no-cents)</span> <div ng-class="{ 'has-error' : (testForm.fourCharCurrency.$touched && testForm.fourCharCurrency.$invalid) }"> <form name=testForm> <input ws-currency="{integer: true}" name=fourCharCurrency maxlength=4 ng-model=currencyValue5> </form> </div> <span>Currency input with min and max (between 1 and 1000)</span> <input ws-currency="{min: 1, max: 1000}" integer=true name=minMax ng-model=currencyValue6> </div> </div> <div> <h3>Footer</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.defaultLanguage = 'fr_CA'; $scope.availableLanguages = ['en_CA', 'fr_CA', 'ru_RU'].join(','); </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-footer lang=myLang langs=availableLanguages></ws-footer> </xmp> </div> <div class=preview> <ws-footer lang=myLang langs=availableLanguages></ws-footer> </div> </div> <div> <h3>Content Selector</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.contentOptions = [ {body: "test1", header: "head1", value: "a"}, {body: "test2", header: "head2", value: "b", disabled: true}, {body: "test3", header: "head3", value: "c", color: "#7cb7b6"}, {body: "test4", header: "head4", value: "d", color: "#f27c5e"}, {body: "test5", header: "head5", value: "e"}, {body: "test6 <br/><br/><a href=http://www.wealthsimple.com target=_blank>Wealthsimple</a>", header: "head6", value: "f"} ]; $scope.multiContentOptions = angular.copy($scope.contentOptions); $scope.stackedContentOptions = [ {header: "head1", value: "a"}, {header: "head2", value: "b"}, {header: "head3", value: "c"}, {header: "head4", value: "d"} ]; $scope.selectedOption = $scope.contentOptions[0]; $scope.selectedOptions = [$scope.multiContentOptions[1], $scope.multiContentOptions[4]]; $scope.selectedStackedOption = $scope.stackedContentOptions[0]; </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-content-selector options=contentOptions selected=selectedOption type=single row-size=4 /> Selected Value: {{ selectedOption.value }} <ws-content-selector options=contentOptions selected=selectedOption type=multi row-size=4 /> Selected Value: {{ selectedOption.value }} <ws-content-selector options=contentOptions selected=selectedOption type=single row-size=2 /> Selected Value: {{ selectedOption.value }} <ws-content-selector options=stackedContentOptions selected=selectedStackedOption type=single stacked=true /> Selected Value: {{ selectedStackedOption.value }} <ws-content-selector options=stackedContentOptions selected=selectedStackedOption type=single stacked=true expandable=true /> <ng-form name=contentSelectorForm> <ws-content-selector name=contentSelector options=stackedContentOptions ng-model=selectedModel type=multi stacked=true required ng-change="log('Something changed!')"/> </ng-form> <div ng-style="{ 'color': contentSelectorForm.contentSelector.$valid ? 'green' : 'red' }">Is valid?: {{ contentSelectorForm.contentSelector.$valid }}</div> </xmp> </div> <div class=preview> <div>Single select</div> <ws-content-selector options=contentOptions selected=selectedOption type=single row-size=4></ws-content-selector> Selected Value: {{ selectedOption.value }} <hr/> <div>Multi select</div> <ws-content-selector options=multiContentOptions selected=selectedOptions type=multi row-size=4></ws-content-selector> Selected Values: <ul> <li ng-repeat="option in selectedOptions">{{option.value}}</li> </ul> <hr/> <div>Single select - smaller row size</div> <ws-content-selector options=contentOptions selected=selectedOption type=single row-size=2></ws-content-selector> Selected Value: {{ selectedOption.value }} <hr/> <div>Stacked select</div> <ws-content-selector options=stackedContentOptions selected=selectedStackedOption type=single stacked=true></ws-content-selector> Selected Value: {{ selectedStackedOption.value }} <hr/> <div>Stacked select expandable</div> <ws-content-selector options=stackedContentOptionsExpandable selected=selectedStackedOptionExpandable type=single stacked=true expandable=true></ws-content-selector> Selected Value: {{ selectedStackedOptionExpandable.value }} <hr/> <ng-form name=contentSelectorForm> <ws-content-selector name=contentSelector options=stackedContentOptions ng-model=selectedModel type=multi stacked=true required ng-change="log('Something changed!')"></ws-content-selector> </ng-form> Selected Values: <ul> <li ng-repeat="option in selectedModel">{{option.value}}</li> </ul> <div ng-style="{ 'color': contentSelectorForm.contentSelector.$valid ? 'green' : 'red' }">Is valid?: {{ contentSelectorForm.contentSelector.$valid }}</div> </div> </div> <div> <h3>Notification</h3> <p> Try pairing with <a href=https://github.com/d-oliveros/ngSticky>ngSticky</a> to give your notifications some staying power. </p> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-notification type=danger dismissible=false actionable=false body-string="Something bad happened :("></ws-notification> <ws-notification type=success dismissible=false actionable=false body-string="Something good happened :)"></ws-notification> <ws-notification type=info dismissible=false actionable=false body-string="Something informative happened :|"></ws-notification> <ws-notification type=neutral dismissible=true dismiss="yell('You dismissed me, how could you :(')" actionable=false body-string="Something neautral happened and you can dismiss it :\"></ws-notification> <ws-notification timeout=5000 type=success dismissible=false actionable=false body-string="I will disapear in a few seconds much like your fading youth."></ws-notification> <ws-notification type=danger dismissible=false actionable=false header-string="Something happened" body-string="... and it must be important, look ^ it even has a header \ (•◡•) /"></ws-notification> <ws-notification type=neutral dismissible=true actionable=true header-string=Whoa! body-string="... something happened and you can do a thing. I wonder what it does ⚆ _ ⚆ " action-string="Press it" action="yell('👏 Bravo, want a 🍪?')"></ws-notification> </xmp> </div> <div class=preview> <ws-notification type=danger dismissible=false actionable=false body-string="Something bad happened :("></ws-notification> <ws-notification type=success dismissible=false actionable=false body-string="Something good happened :)"></ws-notification> <ws-notification type=info dismissible=false actionable=false body-string="Something informative happened :|"></ws-notification> <ws-notification type=neutral dismissible=true dismiss="yell('You dismissed me, how could you :(')" actionable=false body-string="Something neautral happened and you can dismiss it :\"></ws-notification> <ws-notification timeout=5000 type=success dismissible=false actionable=false body-string="I will disapear in a few seconds much like your fading youth."></ws-notification> <ws-notification type=danger dismissible=false actionable=false header-string="Something happened" body-string="... and it must be important, look ^ it even has a header \ (•◡•) /"></ws-notification> <ws-notification type=neutral dismissible=true actionable=true header-string=Whoa! body-string="... something happened and you can do a thing. I wonder what it does ⚆ _ ⚆ " action-string="Press it" action="yell('👏 Bravo, want a 🍪?')"></ws-notification> </div> </div> <div> <h3>Fancy Percent</h3> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-fancy-percent number=4></ws-fancy-percent> <ws-fancy-percent number=null color=true></ws-fancy-percent> <ws-fancy-percent number=-3.1415 to-fixed=2 color=true></ws-fancy-percent> <ws-fancy-percent number=3.10 to-fixed=2></ws-fancy-percent> <ws-fancy-percent number=3.1415 to-fixed=0 color=true></ws-fancy-percent> </xmp> </div> <div class=preview> <div style=font-size:30px> <p> <ws-fancy-percent number=4></ws-fancy-percent> </p> <p> <ws-fancy-percent number=null color=true></ws-fancy-percent> </p> <p> <ws-fancy-percent number=-3.1415 to-fixed=2 color=true></ws-fancy-percent> </p> <p> <ws-fancy-percent number=3.10 to-fixed=2></ws-fancy-percent> </p> <p> <ws-fancy-percent number=3.1415 to-fixed=0 color=true></ws-fancy-percent> </p> </div> </div> </div> <div> <h3>Fancy Currency</h3> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-fancy-currency number=4567></ws-fancy-currency> <ws-fancy-currency number=null color=true></ws-fancy-currency> <ws-fancy-currency number=-4567.890123 to-fixed=2 color=true></ws-fancy-currency> <ws-fancy-currency number=4567.80 to-fixed=2></ws-fancy-currency> <ws-fancy-currency number=4567.890123 to-fixed=0 symbol=¥ color=true></ws-fancy-currency> <ws-fancy-currency number=4567.890123 to-fixed=0 symbol=¥ color=true></ws-fancy-currency> <ws-fancy-currency number=4567.80 to-fixed=0 symbol=€ symbol-end=true></ws-fancy-currency> <ws-fancy-currency number=4567.80 to-fixed=0 currency-iso-code=EUR></ws-fancy-currency> </xmp> </div> <div class=preview> <div style=font-size:30px> <p> <ws-fancy-currency number=4567></ws-fancy-currency> </p> <p> <ws-fancy-currency number=null color=true></ws-fancy-currency> </p> <p> <ws-fancy-currency number=-4567.890123 to-fixed=2 color=true></ws-fancy-currency> </p> <p> <ws-fancy-currency number=4567.80 to-fixed=2></ws-fancy-currency> </p> <p> <ws-fancy-currency number=4567.890123 to-fixed=0 symbol=¥ color=true></ws-fancy-currency> </p> <p> <ws-fancy-currency number=4567.80 to-fixed=0 symbol=€ symbol-end=true></ws-fancy-currency> </p> <p> <ws-fancy-currency number=4567.80 to-fixed=0 currency-iso-code=EUR></ws-fancy-currency> </p> </div> </div> </div> <div> <h3>Progress checkmark</h3> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-progress-checkmark class=responsive-progress-checkmark bgcolor=#c6e1e1 color=75b1b0 completed-steps=1 total-steps=4 rounded=false radius=20 stroke=7 responsive=true></ws-progress-checkmark> <ws-progress-checkmark color=#999999 completed-steps=1 total-steps=4></ws-progress-checkmark> <ws-progress-checkmark completed-steps=4 total-steps=4></ws-progress-checkmark> </xmp> </div> <div class=preview> <div style=font-size:30px;background:#fff> <p> <ws-progress-checkmark class=responsive-progress-checkmark bgcolor=#c6e1e1 color=75b1b0 completed-steps=1 total-steps=4 rounded=false radius=20 stroke=7 responsive=true></ws-progress-checkmark> </p> <p> <ws-progress-checkmark color=#999999 completed-steps=1 total-steps=4></ws-progress-checkmark> </p> <p> <ws-progress-checkmark completed-steps=4 total-steps=4></ws-progress-checkmark> </p> </div> </div> </div> <div> <h3>Two-part allocation bar</h3> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-two-part-allocation-bar text-left=60% text-right=40% width-percent=60></ws-two-part-allocation-bar> <ws-two-part-allocation-bar title-left=Equity title-right="Fixed income" text-left=$2,000 text-right=$8,000 width-percent=20></ws-two-part-allocation-bar> </xmp> </div> <div class=preview> <p> <ws-two-part-allocation-bar text-left=60% text-right=40% width-percent=60></ws-two-part-allocation-bar> </p> <p> <ws-two-part-allocation-bar title-left=Equity title-right="Fixed income" text-left=$2,000 text-right=$8,000 width-percent=20></ws-two-part-allocation-bar> </p> </div> </div> <div> <h3>Chunk Filter</h3> <div class="code dom"> <xmp class="prettyprint lang-javascript" ng-non-bindable> {{['a', 'b', 'c', 'd'] | chunk : 2}} {{['a', 'b', 'c', 'd'] | chunk : 3}} </xmp> </div> <div class=preview> <div style=font-size:30px> <div> {{['a', 'b', 'c', 'd'] | chunk : 2}} </div> <div> {{['a', 'b', 'c', 'd'] | chunk : 3}} </div> </div> </div> </div> <div> <h3>Title Case</h3> <div class="code dom"> <xmp class="prettyprint lang-javascript" ng-non-bindable> {{'hello world' | titleCase}} {{'HELLO WORLD' | titleCase}} </xmp> </div> <div class=preview> <div style=font-size:30px> <div> {{'hello world' | titleCase}} </div> <div> {{'HELLO WORLD' | titleCase}} </div> </div> </div> </div> <div> <h3>Remove Salutation</h3> <div class="code dom"> <xmp class="prettyprint lang-javascript" ng-non-bindable> {{'Sir Schmoopy of Awesometon' | removeSalutation}} {{'Dr. Sigmund Freud' | removeSalutation}} {{'Steve Smith' | removeSalutation}} </xmp> </div> <div class=preview> <div style=font-size:30px> <div> {{'Sir Schmoopy of Awesometon' | removeSalutation}} </div> <div> {{'Dr. Sigmund Freud' | removeSalutation}} </div> <div> {{'Steve Smith' | removeSalutation}} </div> </div> </div> </div> <div> <h3>Secondary Navigation</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.secondaryNavOptions = [ { text: "Option 1", state: "nav-state-one", }, { text: "Option 2", state: "nav-state-two", }, { text: "Option 3", state: "nav-state-three", } ]; $scope.secondaryNavOptionsTranslations = [ { stringId: "nav.options.one", state: "nav-state-one", }, { stringId: "nav.options.two", state: "nav-state-two", }, { stringId: "nav.options.three", state: "nav-state-three", } ]; </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html" ng-non-bindable> <ws-secondary-nav options=secondaryNavOptions></ws-secondary-nav> <ws-secondary-nav options=secondaryNavOptionsTranslations></ws-secondary-nav> </xmp> </div> <div class="preview invert"> <ws-secondary-nav options=secondaryNavOptions></ws-secondary-nav> <ws-secondary-nav options=secondaryNavOptionsTranslations></ws-secondary-nav> </div> </div> <div> <h3>Modal</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.openModal = () => { wsModalService.open({ bodyString: 'Some <b>text</b> to put inside of the modal body.', actionString: 'Confirm this action', actionInProgressString: 'Confirming...', dismissString: 'Cancel', action: (cb) => { // You may have an asynchronous AJAX call here. We'll simulate // that with a timeout. setTimeout(() => { console.log('called after Confirm button is clicked'); cb(); }, 1000); }, dismiss: () => { console.log('called after Cancel link is clicked'); }, }); }; </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html" ng-non-bindable> <button ng-click=openModal() class="button primary-action">Open modal</button> </xmp> </div> <div class="preview invert"> <button ng-click=openModal() class="button primary-action">Open modal</button> </div> </div> <div> <h3>Expander</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.expanderExpanded = function (instanceId) { console.log('OHAI', instanceId); } $scope.expanderCollapsed = function (instanceId) { console.log('KTHXBAI', instanceId); } </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-expander show-text="Show details" hide-text="Hide details" on-expand="expanderExpanded('expanderInstance1')" on-collapse="expanderCollapsed('expanderInstance1')"> <ws-expander-header> <h5>Whatever you want in the header.</h5> </ws-expander-header> <ws-expander-body> <p>Whatever you want in the body</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat lacinia orci faucibus dignissim. Donec pharetra, ipsum a aliquam pharetra, felis libero ornare nunc, et egestas nisi nisi ac metus. </p> </ws-expander-body> </ws-expander> <div style=width:300px> <ws-expander show-text="Reveal further considerations" hide-text="Obscure extraneous minutiae" toggle-width-percent=80> <ws-expander-header> <h5>Yo</h5> </ws-expander-header> <ws-expander-body> <p>OHAI</p> </ws-expander-body> </ws-expander> </div> </xmp> </div> <div class=preview> <ws-expander show-text="Show details" hide-text="Hide details" on-expand="expanderExpanded('expanderInstance1')" on-collapse="expanderCollapsed('expanderInstance1')"> <ws-expander-header> <h5>Whatever you want in the header.</h5> </ws-expander-header> <ws-expander-body> <p>Whatever you want in the body</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat lacinia orci faucibus dignissim. Donec pharetra, ipsum a aliquam pharetra, felis libero ornare nunc, et egestas nisi nisi ac metus. </p> </ws-expander-body> </ws-expander> <div style=width:300px> <ws-expander show-text="Reveal further considerations" hide-text="Obscure extraneous minutiae" toggle-width-percent=80> <ws-expander-header> <h5>Yo</h5> </ws-expander-header> <ws-expander-body> <p>OHAI</p> </ws-expander-body> </ws-expander> </div> </div> </div> <div> <h3>Signature Pad</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.saveSignature = function(data) { console.log('What a fine looking signature you have!'); $scope.signatureData = data; } $scope.redoSignature = function() { $scope.signatureData = null; } </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-signature-pad on-save=saveSignature(signatureData) on-redo=redoSignature></ws-signature-pad> </xmp> </div> <div class=preview> <div class=row-lg> <div class=col-6> <ws-signature-pad on-save=saveSignature(signatureData) on-redo=redoSignature()></ws-signature-pad> </div> </div> </div> </div> <div> <h3>Card Loading Indicator</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> const vm = this; vm.$onChanges = (changes) => { if (changes.ready) { _setShow(changes.ready.currentValue); } }; function _setShow(ready) { vm.show = false; $timeout(() => { vm.show = ready; }, vm.delay); } </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-card-loading-indicator ready=cardReadiness error-message="Failed to load." min-height=150px> <h3 class=card-loading-indicator-example-content>Hello, world!</h3> </ws-card-loading-indicator> <div class=row-lg> <div class=col-6> <ws-card-loading-indicator ready=cardReadiness error-message="Load failed." min-height=100px delay=1300 no-card-background=true> <h3 class=card-loading-indicator-example-content>Hello, world 2!</h3> </ws-card-loading-indicator> </div> </div> </xmp> </div> <div class="preview card-loading-indicator-preview"> <div class=row-lg> <div class=col-12> <button ng-click=makeCardReadinessFalse() class="button primary-action">false</button> <button ng-click=makeCardReadinessTrue() class="button primary-action">ready</button> <button ng-click=makeCardReadinessError() class="button primary-action">error</button> <div class=card-loading-indicator-card-readiness-indicator>ready is: {{cardReadiness}}</div> <ws-card-loading-indicator ready=cardReadiness min-height=50px> <h3 class=card-loading-indicator-example-content>Hello, world!</h3> </ws-card-loading-indicator> <div class=row-lg> <div class=col-6> <ws-card-loading-indicator ready=cardReadiness error-message="Load failed." min-height=100px delay=1300 no-card-background=true> <h3 class=card-loading-indicator-example-content>Hello, world 2!</h3> </ws-card-loading-indicator> </div> </div> </div> </div> </div> </div> <div> <h3>Carousel</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.slideActivated = function (slideIndex) { console.log('OHAI slide', slideIndex); } </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-carousel on-slide-activated=slideActivated(slideIndex)> <div class=carousel-slide ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]"> <button ng-click=slideActivated(i)>{{ i }}</button> </div> <div class=carousel-slide style=height:800px> <button ng-click="slideActivated('9 - tall')">9 - tall</button> </div> </ws-carousel> </xmp> </div> <div class="preview carousel-demo-section"> <ws-carousel on-slide-activated=slideActivated(slideIndex)> <div class=carousel-slide ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]"> <button ng-click=slideActivated(i)>{{ i }}</button> </div> <div class=carousel-slide style=height:800px> <button ng-click="slideActivated('9 - tall')">9 - tall</button> </div> </ws-carousel> </div> </div> <div> <h3>Date Picker</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.changingDate = new Date('Tue Jan 25 2017 00:00:00 GMT-0400 (EDT)'); let currentDateIsDefault = true; $scope.changeDate = function() { if (currentDateIsDefault) { $scope.changingDate = new Date('Tue Jan 25 2017 00:00:00 GMT-0400 (EDT)'); } else { $scope.changingDate = new Date('Tue Dec 24 2017 00:00:00 GMT-0400 (EDT)'); } currentDateIsDefault = !currentDateIsDefault; } </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> Default settings <ws-date-picker> </ws-date-picker> Default date, min and max dates, disabled dates <ws-date-picker default-date="'2017-01-04'" min-date=2017-01-01 max-date=2017-01-25 disabled-dates="['2017-01-05', '2017-01-20']" disable-weekends=true> </ws-date-picker> Date format, min and max years <ws-date-picker format="'yyyy-MM-dd'" min-year=2016 max-year=2017 disabled-dates="['Feb 1, 2017', 'Feb 7, 2017', '2017/02/08']" default-date="'Feb 10, 2017'"> </ws-date-picker> Disable business days, first day of week <ws-date-picker format="'d, M, yy'" disable-next-n-business-days=7 first-day-of-week=monday> </ws-date-picker> Editable input <ws-date-picker editable=true> </ws-date-picker> <div>Setting data with ngModel</div> <button ng-click=changeDate() class="button primary-action">Change date</button> <ws-date-picker ng-model=changingDate min-date=2017-01-01> </ws-date-picker> </xmp> </div> <div class="preview date-picker-preview"> Default settings <ws-date-picker> </ws-date-picker> Default date, min and max dates, disabled dates <ws-date-picker default-date="'2017-01-04'" min-date=2017-01-01 max-date=2017-01-25 disabled-dates="['2017-01-05', '2017-01-20']" disable-weekends=true> </ws-date-picker> Date format, min and max years <ws-date-picker format="'yyyy-MM-dd'" min-year=2016 max-year=2017 disabled-dates="['Feb 1, 2017', 'Feb 7, 2017', '2017/02/08']" default-date="'Feb 10, 2017'"> </ws-date-picker> Disable business days, first day of week <ws-date-picker format="'d, M, yy'" disable-next-n-business-days=7 first-day-of-week=monday> </ws-date-picker> Editable input <ws-date-picker editable=true> </ws-date-picker> <div>Setting data with ngModel</div> <button ng-click=changeDate() class="button primary-action">Change date</button> <ws-date-picker ng-model=changingDate min-date=2017-01-01> </ws-date-picker> </div> </div> <div> <h3>Multiple Inputs</h3> <div class="code controller"> <xmp class="prettyprint lang-javascript"> $scope.multipleInputCompleted = function (result) { console.log('Multiple inputs form completed with ' + result); } $scope.multipleInputReadonly = false; </xmp> </div> <div class="code dom"> <xmp class="prettyprint lang-html"> <ws-multiple-input number-of-inputs=3 is-numeric=true on-completed=multipleInputCompleted(result) is-readonly=multipleInputReadonly></ws-multiple-input> <ws-multiple-input number-of-inputs=6 on-completed=multipleInputCompleted(result) is-readonly=multipleInputReadonly></ws-multiple-input> </xmp> </div> <div class=preview> <ws-multiple-input number-of-inputs=3 is-numeric=true on-completed=multipleInputCompleted(result) is-readonly=multipleInputReadonly></ws-multiple-input> <ws-multiple-input number-of-inputs=6 on-completed=multipleInputCompleted(result) is-readonly=multipleInputReadonly></ws-multiple-input> </div> </div> <div> <h3>Validation Messages</h3> <div class="code dom"> <xmp class="prettyprint lang-html"> <div ng-form=validationMessagesExampleForm> <input class=form-input-text placeholder="Example email field" type=email name=exampleEmail ng-model=validationMessagesExampleModel.exampleEmail required> <ws-validation-messages errors=validationMessagesExampleModel model=validationMessagesExampleModel attribute=exampleEmail form-name=validationMessagesExampleForm.exampleEmail> </ws-validation-messages> </div> </xmp> </div> <div class=preview> <div ng-form=validationMessagesExampleForm> <input class=form-input-text placeholder="Example email field" type=email name=exampleEmail ng-model=validationMessagesExampleModel.exampleEmail required> <ws-validation-messages errors=validationMessagesExampleModel model=validationMessagesExampleModel attribute=exampleEmail form-name=validationMessagesExampleForm.exampleEmail> </ws-validation-messages> </div> </div> </div> <script> var myApp = angular.module('myApp', ['ws.common', 'ui.router']).config(Config);

      Config.$inject = [
        '$urlRouterProvider',
        '$stateProvider',
      ];

      function Config($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
          .state('nav-state-one', {
            url: '/state-one',
            template: '<ui-view/>',
            controller: 'myCtrl'
          })
          .state('nav-state-two', {
            url: '/state-two',
            template: '<ui-view/>',
            controller: 'myCtrl'
          })
          .state('nav-state-three', {
            url: '/state-three',
            template: '<ui-view/>',
            controller: 'myCtrl'
          });
      }

      myApp.controller('myCtrl', ['$scope', '$location', '$q', '$log', 'wsModalService', function($scope, $location, $q, $log, wsModalService) {
        $scope.autogrowCurrencyValue = 1111;
        $scope.autogrowCurrencyPencilValue = 567;
        $scope.autogrowNumberValue = 30;
        $scope.autogrowTextValue = 'Leeroy Jenkins';

        $scope.currencyValue1 = 111;
        $scope.currencyValue2 = 222;
        $scope.currencyValue3 = 333;
        $scope.currencyValue4 = 444;
        $scope.currencyValue5 = 555;
        $scope.currencyValue6 = 666;
        $scope.signatureData = '';
        $scope.cardReadiness = false;
        $scope.changingDate = new Date('Tue Jan 25 2017 00:00:00 GMT-0400 (EDT)');
        let currentDateIsDefault = true;

        $scope.yell = function(msg) {
          alert(msg);
        };

        $scope.myLang = 'en_CA';
        $scope.availableLanguages = ['en_CA', 'fr_CA'].join(',')

        $scope.log = function(msg) {
          console.log(msg);
        };

        $scope.contentOptions = [
          {body: "test1", header: "head1", value: "a"},
          {body: "test2", header: "head2", value: "b", disabled: true},
          {body: "test3", header: "head3", value: "c", color: "#7cb7b6"},
          {body: "test4", header: "head4", value: "d", color: "#f27c5e"},
          {body: "test5", header: "head5", value: "e"},
          {body: "test6 <br/><br/><a href='http://www.wealthsimple.com' target='_blank'>Wealthsimple</a>", header: "head6", value: "f"}
        ];

        $scope.multiContentOptions = angular.copy($scope.contentOptions);

        $scope.stackedContentOptions = [
          {header: "head1", value: "a"},
          {header: "head2", value: "b"},
          {header: "head3", value: "c"},
          {header: "head4", value: "d"}
        ];

        $scope.stackedContentOptionsExpandable = [
          {header: "head1", value: "a", blurb: "a blurb"},
          {header: "head2", value: "b", blurb: "b blurb", body: "<p>Crazy body text.</p><p>Crazy body text.Crazy body text.Crazy body text.Crazy body text.Crazy body text.Crazy body text.Crazy body text.Crazy body text.</p> <a>Read More</a>"},
          {header: "head3", value: "c", blurb: "c blurb"},
          {header: "head4", value: "d", blurb: "d blurb"}
        ];

        $scope.selectedOption = $scope.contentOptions[0];
        $scope.selectedOptions = [$scope.multiContentOptions[1], $scope.multiContentOptions[4]];
        $scope.selectedStackedOption = $scope.stackedContentOptions[0];
        $scope.selectedStackedOptionExpandable = $scope.stackedContentOptionsExpandable[0];
        $scope.selectedModel = [$scope.stackedContentOptions[0]];


        $scope.secondaryNavOptions = [
          {
            text: "Option 1",
            state: "nav-state-one",
          },
          {
            text: "Option 2",
            state: "nav-state-two",
          },
          {
            text: "Option 3",
            state: "nav-state-three",
          }
        ];

        $scope.secondaryNavOptionsTranslations = [
          {
            stringId: "devo.nav.options.one",
            state: "nav-state-one",
          },
          {
            stringId: "devo.nav.options.two",
            state: "nav-state-two",
          },
          {
            stringId: "devo.nav.options.three",
            state: "nav-state-three",
          }
        ];

        $scope.$watch('myLang', function(newValue, oldValue) {
          if (newValue !== oldValue) {
            console.log("changed language to " + newValue)
          }
        });

        $scope.openModal = function() {
          wsModalService.open({
            bodyString: "You're setting up a <b>$100.00</b> deposit every <b>month</b> into your <b>RRSP</b> from your <b>PC Financial</b> bank account.",
            actionString: 'Confirm this action',
            actionInProgressString: 'Confirming...',
            dismissString: 'Cancel',
            action: function(cb) {
              // Pretend like there's an async call happening
              setTimeout(function() {
                $log.info('Confirmed');
                cb();
              }, 1000);
            },
            dismiss: function() {
              $log.info('Dismissed');
            },
          });
        };

        $scope.expanderExpanded = function (instanceId) {
          console.log('OHAI', instanceId);
        }

        $scope.expanderCollapsed = function (instanceId) {
          console.log('KTHXBAI', instanceId);
        }

        $scope.saveSignature = function (data) {
          console.log('What a fine looking signature you have!');
          $scope.signatureData = data;
        };

        $scope.slideActivated = function (slideIndex) {
          console.log('OHAI slide', slideIndex);
        }

        $scope.redoSignature = function () {
          $scope.signatureData = null;
        };

        $scope.makeCardReadinessFalse = function() {
          $scope.cardReadiness = false;
        };

        $scope.makeCardReadinessTrue = function() {
          $scope.cardReadiness = true;
        };

        $scope.makeCardReadinessError = function() {
          $scope.cardReadiness = 'error';
        };

        $scope.multipleInputCompleted = function (result) {
          console.log('Multiple inputs form completed with', result);
        };

        $scope.multipleInputReadonly = false;

        $scope.changeDate =  function() {
          if (currentDateIsDefault) {
            $scope.changingDate = new Date('Tue Jan 25 2017 00:00:00 GMT-0400 (EDT)');
          }
          else {
            $scope.changingDate = new Date('Tue Dec 24 2017 00:00:00 GMT-0400 (EDT)');
          }
          currentDateIsDefault = !currentDateIsDefault;
        }
      }]); </script> <script type="text/javascript" src="ws-directives.js"></script></body> </html> 