superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components_deprecated/spacing.html

@@ -1,117 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Spacing</h2>
-    <p class="docs-page__paragraph">
-        Superdesk UI Framework includes a range of shorthand margin and padding helper classes to modify an element’s appearance. 
-        To keep consistency, all end values are actualy mutipliers of the <code>$sd-base-increment</code> variable, which equals to 0.8rem. 
-        For convinience the root (html) font-size is set to 10px, which makes 1rem by default equal to 10px.
-    </p>
-
-    <h4 class="docs-page__h4">Naming</h4>
-    <p class="docs-page__paragraph">
-        The classes are named using the format <code>{property}-{side}--{size}</code>.
-    </p>
-    <div class="docs-page__paragraph">
-        <b>Where <code>{property}</code> is:</b>
-        <ul class="docs-page__unordered-list">
-            <li><code>sd-padding</code> - for setting <code>padding</code></li>
-            <li><code>sd-margin</code> - for setting <code>margin</code></li>
-        </ul>
-
-        <b>Where <code>{side}</code> is one of:</b>
-        <ul class="docs-page__unordered-list">
-            <li><code>t</code> - sets <code>margin-top</code> or <code>padding-top</code></li>
-            <li><code>b</code> - sets <code>margin-bottom</code> or <code>padding-bottom</code></li>
-            <li><code>l</code> - sets <code>margin-left</code> or <code>padding-left</code></li>
-            <li><code>r</code> - sets <code>margin-right</code> or <code>padding-right</code></li>
-            <li><code>x</code> - sets both <code>*-left</code> and <code>*-right</code></li>
-            <li><code>y</code> - sets both <code>*-top</code> and <code>*-bottom</code></li>
-            <li>blank (no side defined) - sets a margin or padding on all 4 sides of the element (eg. <code>sd-margin--2</code> )</li> 
-        </ul>
-
-        <b>Where <code>{size}</code> is one of:</b>
-        <ul class="docs-page__unordered-list">
-            <li><code>0</code> - eliminates the margin or padding by setting it to <code>0</code></li>
-            <li><code>0-5</code> - sets the margin or padding to <code>$sd-base-increment * .5</code> (results to 0.4rem)</li>
-            <li><code>1</code> - sets the margin or padding to <code>$sd-base-increment</code> (results to 0.8rem)</li>
-            <li><code>1-5</code> - sets the margin or padding to <code>$sd-base-increment * 1.5</code> (results to 1.2rem)</li>
-            <li><code>2</code> - sets the margin or padding to <code>$sd-base-increment * 2</code> (results to 1.6rem)</li>
-            <li><code>3</code> - sets the margin or padding to <code>$sd-base-increment * 3</code> (results to 2.4rem)</li>
-            <li><code>4</code> - sets the margin or padding to <code>$sd-base-increment * 4</code> (results to 3.2rem)</li>
-            <li><code>5</code> - sets the margin or padding to <code>$sd-base-increment * 5</code> (results to 4rem)</li>
-        </ul>
-    </div>
-    <h4 class="docs-page__h4">Examples</h4>
-    <div class="docs-page__code-window" doc-tabs>
-            <div class="docs-page__window-content">
-                <div class="docs-page__code-example">
-    <code class="docs-page__code--large"><xmp><div class="sd-margin-t--2"></div></xmp></code>
-    <p class="docs-page__paragraph docs-page__paragraph--small">// Sets the top margin to 1.6rem</p>
-    <code class="docs-page__code--large"><xmp><div class="sd-margin--3"></div></xmp></code>
-    <p class="docs-page__paragraph docs-page__paragraph--small">// Sets the margin on all sides to 2.4rem</p>
-    <code class="docs-page__code--large"><xmp><div class="sd-margin-y--1"></div></xmp></code>
-    <p class="docs-page__paragraph docs-page__paragraph--small">// Sets the top and bottom margin to 0.8rem</p>
-    <code class="docs-page__code--large"><xmp><div class="sd-padding-x--2"></div></xmp></code>
-    <p class="docs-page__paragraph docs-page__paragraph--small">// Sets the left and right padding to 1.6rem</p>
-    <code class="docs-page__code--large"><xmp><div class="sd-padding-b--4"></div></xmp></code>
-    <p class="docs-page__paragraph docs-page__paragraph--small">// Sets the bottom padding to 3.2rem</p>
-    <code class="docs-page__code--large"><xmp><div class="sd-padding--0"></div></xmp></code>
-    <p class="docs-page__paragraph docs-page__paragraph--small">// Set/reset the padding on all sides to 0</p>
-                <div class="docs-page__code-markup">
-                    <pre class="prettyprint lang-html linenums">
-                    </pre>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3 sd-margin-t--5">Margin auto</h3>
-    <p class="docs-page__paragraph">
-        Besides numeric margin values, Superdesk UI Framework includes also a range of helper classes to set margins to <code>auto</code>. 
-            The naming logic is the same as with nuneric values except that <code>{size}</code> is always replaced with <code>auto</code>.    
-    </p>
-    <h4 class="docs-page__h4">Available options</h4>
-    <ul class="sd-margin-t--2">
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin-l--auto</code><br>
-                // Sets the left margin to auto.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin-r--auto</code><br>
-                // Sets the right margin to auto.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin-t--auto</code><br>
-                // Sets the top margin to auto.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin-b--auto</code><br>
-                // Sets the bottom margin to auto.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin-x--auto</code><br>
-                // Sets the left and right margin to auto (convinient for centering block level items inside a container).
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin-y--auto</code><br>
-                // Sets the top and bottom margin to auto.
-            </p>
-        </li>
-        <li>
-            <p class="docs-page__paragraph">
-                <code>sd-margin--auto</code><br>
-                // Sets all margins to auto.
-            </p>
-        </li>
-    </ul>
-</section>    

package/examples/pages/components_deprecated/switch.html

@@ -1,31 +0,0 @@
-<section class="docs-page__container"> 
-    <h2 class="docs-page__h2">Switch</h2>
-    <p class="docs-page__paragraph">Add the directive <code>sd-switch</code> and the <code>ng-model=" "</code> attribute to a <code>&lt;span&gt;</code> to create a switch. 
-    Labels can be placed on both left and right side. To place the switch on a single line use the <code>form__row</code> container.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="form__row">
-                    <span ng-model="AB" sd-switch></span>
-                </div>
-                <div class="form__row">
-                    <label>Label for switch</label><span ng-model="CD" sd-switch></span>
-                </div>
-                <div class="form__row">
-                    <span ng-model="EF" sd-switch></span><label>Label on the right</label>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <span ng-model="AB" sd-switch ng-non-bindable></span>
-                    <label>Label for switch</label><span ng-model="AB" sd-switch ng-non-bindable></span>
-                    <span ng-model="AB" sd-switch ng-non-bindable></span><label>Label on the right</label>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>   

package/examples/pages/components_deprecated/tables.html

@@ -1,58 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Tables</h2>
-    <p class="docs-page__paragraph">Default look of tables in Superdesk</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <table class="sd-table">
-                    <thead>
-                        <tr>
-                            <th>Full name</th>
-                            <th>Usernam</th>
-                            <th>Role</th>
-                            <th>Email</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>Johnny Doe</td>
-                            <td>doejohn</td>
-                            <td>Reporter</td>
-                            <td>johnny.doe@sourcefabric.org</td>
-                        </tr>
-                        <tr>
-                            <td>Jane Doe</td>
-                            <td>janedoe</td>
-                            <td>Producer</td>
-                            <td>jane.doe@sourcefabric.org</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!--Basic SD table-->
-                    <table>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </table>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/tabs.html

@@ -1,257 +0,0 @@
-<section class="docs-page__container">   
-    <h2 class="docs-page__h2">Tabs</h2>
-    <h3 class="docs-page__h3">Default tabs</h3>
-    <p class="docs-page__paragraph">To have tabs like navigation add unordered list with class <code>.nav-tabs</code> and follow provided html markup. Content part is provided just as an example.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row">
-                    <ul class="nav-tabs">
-                        <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>                    
-                    </ul>
-                    <div class="nav-tabs__content">
-                        <div ng-if="!tab || tab === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <ul class="nav-tabs">
-                        <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>
-                    </ul>
-                    <div class="nav-tabs__content" ng-non-bindable>
-                        <div ng-if="!tab || tab === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Large tabs</h3>
-    <p class="docs-page__paragraph">Add additional class (modifier) <code>.nav-tabs--big</code> to unordered list <code>.nav-tabs</code>.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">            
-                <div class="docs-page__content-row">
-                    <ul class="nav-tabs nav-tabs--big">
-                        <li ng-class="{'nav-tabs__tab--active': !tab2 || tab2 === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab2 = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab2 === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab2 = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab2 === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab2 = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>                    
-                    </ul>
-                    <div class="nav-tabs__content">
-                        <div ng-if="!tab2 || tab2 === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab2 === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab2 === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <ul class="nav-tabs nav-tabs--big">
-                        <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>
-                    </ul>
-                    <div class="nav-tabs__content" ng-non-bindable>
-                        <div ng-if="!tab || tab === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Small tabs</h3>
-    <p class="docs-page__paragraph">Add additional class (modifier) <code>.nav-tabs--small</code> to unordered list <code>.nav-tabs</code>.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">            
-                <div class="docs-page__content-row">
-                    <ul class="nav-tabs nav-tabs--small">
-                        <li ng-class="{'nav-tabs__tab--active': !tab3 || tab3 === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab3 = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab3 === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab3 = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab3 === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab3 = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab3 === 'item-history'}" class="nav-tabs__tab">
-                            <button ng-click="tab3 = 'item-history'" class="nav-tabs__link"><span translate>Item History</span></button>
-                        </li>
-                    </ul>
-                    <div class="nav-tabs__content nav-tabs__content--small">
-                        <div ng-if="!tab3 || tab3 === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab3 === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab3 === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                        <div ng-if="tab3 === 'item-history'" class="nav-tabs__pane">
-                            Item history here.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <ul class="nav-tabs nav-tabs--small">
-                        <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>
-                    </ul>
-                    <div class="nav-tabs__content nav-tabs__content--small" ng-non-bindable>
-                        <div ng-if="!tab || tab === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Dark tab variation</h3>
-    <p class="docs-page__paragraph">Add additional class (modifier) <code>.nav-tabs--ui-dark</code> to unordered list <code>.nav-tabs</code>. Dark navigation also works with different sizing (big or small).</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div> 
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">            
-                <div class="docs-page__content-row docs-page__content-row--ui-dark">
-                    <ul class="nav-tabs nav-tabs--ui-dark">
-                        <li ng-class="{'nav-tabs__tab--active': !tab4 || tab4 === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab4 = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab4 === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab4 = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab4 === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab4 = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>                    
-                    </ul>
-                    <div class="nav-tabs__content nav-tabs__content--ui-dark">
-                        <div ng-if="!tab4 || tab4 === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab4 === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab4 === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <ul class="nav-tabs nav-tabs--ui-dark">
-                        <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'content'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'content'" class="nav-tabs__link"><span translate>Content</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'metadata'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'metadata'" class="nav-tabs__link"><span translate>Metadata</span></button>
-                        </li>
-                        <li ng-class="{'nav-tabs__tab--active': tab === 'duplicates'}" class="nav-tabs__tab">
-                            <button ng-click="tab = 'duplicates'" class="nav-tabs__link"><span translate>Duplicates</span></button>
-                        </li>
-                    </ul>
-                    <div class="nav-tabs__content nav-tabs__content--ui-dark" ng-non-bindable>
-                        <div ng-if="!tab || tab === 'content'" class="nav-tabs__pane">
-                            Content here.
-                        </div>
-                        <div ng-if="tab === 'metadata'" class="nav-tabs__pane">
-                            Metadata here.
-                        </div>
-                        <div ng-if="tab === 'duplicates'" class="nav-tabs__pane">
-                            Duplicates here.
-                        </div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/tag-input.html

@@ -1,123 +0,0 @@
-<section class="docs-page__container">  
-    <h2 class="docs-page__h2">Tag Input</h2>
-    <p class="docs-page__paragraph">
-        A tag input is an input box that automatically creates tags – also called tokens – out of typed text every time a certain key is pressed. It's useful for tagging and highlighting information right on the input box.<br><br>
-        Properties: <br>
-        <code>data-items</code>: array of items for autosuggest.<br>
-        <code>data-field</code>: defines property in object by which to filter items.<br>
-        <code>data-key-property</code>: defines property used as the id of the items.<br>
-        <code>data-freetext</code>: allows free input of items that are not in suggestion list.<br>
-        <code>data-on-change</code>: callback for when the tags are added/removed<br>
-        <code>data-replace-spaces-with-dashes</code>: Flag indicating that spaces will be replaced with dashes (defaults to true).<br>
-        <code>data-min-length</code>: sets the minimum allowed length of a tag to be valid (defaults to 3).<br>
-        <code>data-max-length</code>: sets the maximum allowed length of a tag to be valid (defaults to 9007199254740991).<br>
-        <code>data-placeholder</code>: Placeholder text for the control.<br>
-        <code>data-max-results-to-show</code>: Maximum number of results to be displayed at a time. If < 1 then show all results.<br><br>
-        If you don't define <code>data-items</code> button will not be visible.
-    </p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Tag input with button for picking items from list</p>
-                <div class="form__row">
-                    <sd-tag-input
-                        ng-model="cars1"
-                        data-label="Cars"
-                        data-items="[
-                        { text: 'Audi' },
-                        { text: 'BMW' },
-                        { text: 'Hyundai' },
-                        { text: 'Opel' },
-                        { text: 'Audi2' },
-                        { text: 'BMW2' },
-                        { text: 'Hyundai2' },
-                        { text: 'Opel2' },
-                        { text: 'Audi3' },
-                        { text: 'BMW3' },
-                        { text: 'Hyundai3' },
-                        { text: 'Opel3' },
-                        { text: 'Audi4' },
-                        { text: 'BMW4' },
-                        { text: 'Hyundai4' },
-                        { text: 'Opel4' },
-                        { text: 'Audi5' },
-                        { text: 'BMW5' },
-                        { text: 'Hyundai5' },
-                        { text: 'Opel5' },
-                        { text: 'Audi6' },
-                        { text: 'BMW6' },
-                        { text: 'Hyundai6' },
-                        { text: 'Opel6' }
-                        ]"
-                        data-field="text"
-                        data-freetext="false">
-                    </sd-tag-input>
-                </div>
-                <p class="docs-page__paragraph">// Tag input with suggestions + freetype text</p>
-                <div class="form__row">
-                    <sd-tag-input
-                        ng-model="cars2"
-                        data-label="Cars"
-                        data-items="[
-                        { text: 'Audi' },
-                        { text: 'BMW' },
-                        { text: 'Hyundai' },
-                        { text: 'Opel' }
-                        ]"
-                        data-field="text"
-                        data-freetext="true">
-                    </sd-tag-input>
-                </div>
-                <p class="docs-page__paragraph">// Only freetype text</p>
-                <div class="form__row">
-                    <sd-tag-input
-                        ng-model="cars3"
-                        data-label="Cars">
-                    </sd-tag-input>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    // Tag input with button for picking items from list
-                    <sd-tag-input
-                        ng-model="cars1"
-                        data-label="Cars"
-                        data-items="[
-                            { text: 'Audi' },
-                            { text: 'BMW' },
-                            { text: 'Hyundai' },
-                            { text: 'Opel' }
-                        ]"
-                        data-field="text"
-                        data-freetext="false">
-                    </sd-tag-input>
-
-                    // Tag input with suggestions + freetype text
-                    <sd-tag-input
-                        ng-model="cars2"
-                        data-label="Cars"
-                        data-items="[
-                            { text: 'Audi' },
-                            { text: 'BMW' },
-                            { text: 'Hyundai' },
-                            { text: 'Opel' }
-                        ]"
-                        data-field="text"
-                        data-freetext="true">
-                    </sd-tag-input>
-
-                    // Only freetype text
-                    <sd-tag-input
-                        ng-model="cars3"
-                        data-label="Cars">
-                    </sd-tag-input>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>  
-