Sidebar: Add uk-nav-default class in uk-nav. Pagination: Change ratio of icons. Theme preview: Add some missing components

This commit is contained in:
Konstantinos Triantafyllou 2022-06-16 17:54:50 +03:00
parent fc73b55832
commit 4ed89bac13
6 changed files with 122 additions and 124 deletions

View File

@ -2,7 +2,7 @@
<div id="sidebar_content"> <div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh"> <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div> <div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
<ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav> <ul class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index"> <ng-template ngFor [ngForOf]="items" let-item let-i="index">
<li [class.uk-active]="isTheActiveMenuItem(item)" <li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-open]="isTheActiveMenuItem(item)" [class.uk-open]="isTheActiveMenuItem(item)"

View File

@ -58,7 +58,7 @@ declare var UIkit;
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label> <label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
</div> </div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'" <div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
[attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea')?('title: ' + getLabel(formControl.value) + '; delay: 500; pos: bottom-left'):null"> [attr.uk-tooltip]="(tooltip && formControl.value && !focused && type !== 'chips' && type !== 'textarea')?('title: ' + getLabel(formControl.value) + '; delay: 500; pos: bottom-left'):null">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'"> <ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" <input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="formAsControl" [class.uk-text-truncate]="!focused"> [formControl]="formAsControl" [class.uk-text-truncate]="!focused">

View File

@ -11,7 +11,7 @@ import {properties} from "../../../environments/environment";
<li [class.uk-invisible]="currentPage <= 1"> <li [class.uk-invisible]="currentPage <= 1">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))" <a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
[routerLink]=baseUrl aria-label="Previous"> [routerLink]=baseUrl aria-label="Previous">
<icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon> <icon name="chevron_left" ratio="1.2" [flex]="true" customClass="uk-pagination-previous"></icon>
</a> </a>
</li> </li>
<li *ngIf=" currentPage -2 > 0"><a <li *ngIf=" currentPage -2 > 0"><a
@ -36,7 +36,7 @@ import {properties} from "../../../environments/environment";
<li [class.uk-invisible]="getTotalPages() <= currentPage"> <li [class.uk-invisible]="getTotalPages() <= currentPage">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))" <a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
[routerLink]=baseUrl aria-label="Next"> [routerLink]=baseUrl aria-label="Next">
<icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon> <icon name="chevron_right" ratio="1.2" [flex]="true" customClass="uk-pagination-next"></icon>
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -104,16 +104,7 @@
<button class="uk-button uk-button-default" disabled="">Disabled</button> <button class="uk-button uk-button-default" disabled="">Disabled</button>
</div> </div>
</div> </div>
<div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
<div>
<button class="uk-button uk-button-primary outlined">Outlined Primary</button>
</div>
<div>
<button class="uk-button uk-button-secondary outlined">Outlined Secondary</button>
</div>
</div>
<hr class="uk-margin-medium"> <hr class="uk-margin-medium">
<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid=""> <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid="">
<div class="uk-first-column"> <div class="uk-first-column">
<ul class="uk-list"> <ul class="uk-list">
@ -139,6 +130,7 @@
<ul class="uk-list"> <ul class="uk-list">
<li class="uk-text-muted">Text Muted</li> <li class="uk-text-muted">Text Muted</li>
<li class="uk-text-emphasis">Text Emphasis</li> <li class="uk-text-emphasis">Text Emphasis</li>
<li class="uk-text-background">Text Background</li>
<li class="uk-text-primary">Text Primary</li> <li class="uk-text-primary">Text Primary</li>
<li class="uk-text-secondary">Text Secondary</li> <li class="uk-text-secondary">Text Secondary</li>
<li class="uk-text-success">Text Success</li> <li class="uk-text-success">Text Success</li>
@ -172,10 +164,10 @@
<div class="uk-grid-small uk-grid" uk-grid=""> <div class="uk-grid-small uk-grid" uk-grid="">
<div class="uk-first-column"> <div class="uk-first-column">
<a class="uk-button uk-button-text" href="#">Read more</a> <a class="uk-button uk-button-text" href="#">Button Text</a>
</div> </div>
<div> <div>
<a class="uk-button uk-button-text" href="#">5 Comments</a> <a class="uk-button uk-button-link" href="#">Button Link</a>
</div> </div>
</div> </div>
@ -206,7 +198,13 @@
</ul> </ul>
<ul class="uk-pagination uk-flex-center" uk-margin=""> <ul class="uk-pagination uk-flex-center" uk-margin="">
<li class="uk-first-column"><a href="#"><span uk-pagination-previous="" class="uk-icon uk-pagination-previous"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-previous"><polyline fill="none" stroke="#000" stroke-width="1.2" points="6 1 1 6 6 11"></polyline></svg></span></a></li> <li class="uk-first-column">
<a href="#">
<span class="uk-icon uk-pagination-previous">
<icon name="chevron_left" [flex]="true" ratio="1.2"></icon>
</span>
</a>
</li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li class="uk-disabled"><span>...</span></li> <li class="uk-disabled"><span>...</span></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
@ -218,7 +216,13 @@
<li><a href="#">10</a></li> <li><a href="#">10</a></li>
<li class="uk-disabled"><span>...</span></li> <li class="uk-disabled"><span>...</span></li>
<li><a href="#">20</a></li> <li><a href="#">20</a></li>
<li><a href="#"><span uk-pagination-next="" class="uk-icon uk-pagination-next"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-next"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 1 6 6 1 11"></polyline></svg></span></a></li> <li>
<a href="#">
<span class="uk-icon uk-pagination-next">
<icon name="chevron_right" [flex]="true" ratio="1.2"></icon>
</span>
</a>
</li>
</ul> </ul>
</div> </div>
@ -259,10 +263,17 @@
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
</ul> </ul>
<div class="uk-card uk-card-body uk-card-default uk-card-hover"> <div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-header">
<h3 class="uk-card-title">Default</h3> <h3 class="uk-card-title">Default</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div> </div>
<div class="uk-card-footer uk-flex uk-flex-right">
<button class="uk-button uk-button-primary">Action</button>
</div>
</div>
<div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover"> <div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover">
<h3 class="uk-card-title">Primary</h3> <h3 class="uk-card-title">Primary</h3>
@ -288,64 +299,56 @@
<div class="uk-width-3-5@m uk-first-column"> <div class="uk-width-3-5@m uk-first-column">
<div class="uk-child-width-expand@s uk-grid" uk-grid=""> <div class="uk-child-width-expand@s uk-grid" uk-grid="">
<form class="uk-grid uk-child-width-1-1" uk-grid>
<div class="uk-width-1-2">
<div input placeholder="Text" [validators]="required"></div>
</div>
<div class="uk-width-1-2">
<div input placeholder="Select" type="select" [options]="['option 1', 'option 2']"></div>
</div>
<div>
<div input placeholder="URL" type="URL" [(value)]="url" [validators]="urlValidator"></div>
</div>
<div>
<div input placeholder="Logo URL" type="logoURL" [(value)]="logoURL"></div>
</div>
<div class="uk-width-1-2">
<div input placeholder="Autocomplete" type="autocomplete" [options]="['option 1', 'option 2']"></div>
</div>
<div class="uk-width-1-2">
<div input placeholder="Autocomplete Soft" type="autocomplete_soft" [options]="['option 1', 'option 2']"></div>
</div>
<div>
<div input placeholder="Textarea" type="textarea"></div>
</div>
<div class="uk-grid-small uk-child-width-auto uk-margin uk-grid" uk-grid="">
<div class="uk-first-column"> <div class="uk-first-column">
<label>
<form class="uk-form-stacked"> <input class="uk-radio" type="radio" name="radio">
<span class="uk-margin-small-left">Radio</span>
<div class="uk-margin-small"> </label>
<label class="uk-form-label">Text</label>
<input class="uk-input" type="text" placeholder="Some text...">
</div>
<div class="uk-margin-small">
<select class="uk-select">
<option>Option 01</option>
<option>Option 02</option>
</select>
</div>
<div class="uk-margin-small">
<textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea>
</div>
<div class="uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<div class="uk-first-column">
<label><input class="uk-radio" type="radio" name="radio"> Radio</label>
</div> </div>
<div> <div>
<label><input class="uk-checkbox" type="checkbox"> Checkbox</label> <label>
<input class="uk-checkbox" type="checkbox">
<span class="uk-margin-small-left">Checkbox</span>
</label>
</div> </div>
</div> </div>
<div class="uk-margin-small"> <div>
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1"> <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
</div> </div>
</form> </form>
</div>
<div>
<form class="uk-form-stacked">
<div class="uk-margin-small">
<label class="uk-form-label">States</label>
<input class="uk-input" type="text" placeholder=":disabled" disabled="">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
</div>
</form>
</div>
</div> </div>
<div class="uk-overflow-auto uk-margin-medium-top"> <div class="uk-overflow-auto uk-margin-medium-top">
@ -382,28 +385,38 @@
</table> </table>
</div> </div>
<div class="uk-margin-medium-top uk-alert" uk-alert=""> <div class="uk-margin-medium-top uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> <a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Default</p> <p>Default</p>
</div> </div>
<div class="uk-alert-primary uk-alert" uk-alert=""> <div class="uk-alert-primary uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> <a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Primary</p> <p>Primary</p>
</div> </div>
<div class="uk-alert-success uk-alert" uk-alert=""> <div class="uk-alert-success uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> <a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Success</p> <p>Success</p>
</div> </div>
<div class="uk-alert-warning uk-alert" uk-alert=""> <div class="uk-alert-warning uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> <a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Warning</p> <p>Warning</p>
</div> </div>
<div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert=""> <div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a> <a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Danger</p> <p>Danger</p>
</div> </div>
@ -520,11 +533,14 @@
</div> </div>
<div> <div>
<a href="#" uk-slidenav-previous="" class="uk-icon uk-slidenav-previous uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-previous"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a> <a href="#" class="uk-icon uk-slidenav-previous uk-slidenav">
<a href="#" uk-slidenav-next="" class="uk-icon uk-slidenav-next uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-next"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a> <icon name="chevron_left" [flex]="true" ratio="1.5"></icon>
</a>
<a href="#" class="uk-icon uk-slidenav-next uk-slidenav">
<icon name="chevron_right" [flex]="true" ratio="1.5"></icon>
</a>
</div> </div>
<div> <!--<div>
<ul class="uk-thumbnav"> <ul class="uk-thumbnav">
<li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> <li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
@ -532,7 +548,7 @@
<li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li> <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
</ul> </ul>
</div> </div>-->
<div> <div>
<div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div> <div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div>
@ -545,12 +561,14 @@
</div> </div>
<div> <div>
<button type="button" uk-close="" class="uk-icon uk-close"><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button> <button type="button" class="uk-icon uk-close">
<icon name="close" ratio="1.5"></icon>
</button>
</div> </div>
<div> <div>
<a href="#" uk-totop="" class="uk-icon uk-totop"><svg width="18" height="10" viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" data-svg="totop"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 9 9 1 17 9 "></polyline></svg></a> <a href="#" uk-totop="" class="uk-icon uk-totop"></a>
</div> </div>
</div> </div>
@ -735,16 +753,18 @@
<div id="modal" uk-modal="" class="uk-modal"> <div id="modal" uk-modal="" class="uk-modal">
<div class="uk-modal-dialog"> <div class="uk-modal-dialog">
<button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button> <div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between uk-background-primary-opacity">
<div class="uk-modal-header"> <h5 class="uk-modal-title uk-margin-remove">Headline</h5>
<h2 class="uk-modal-title">Headline</h2> <button class="uk-modal-close-default uk-icon uk-close uk-margin-left" type="button">
<icon ratio="1.5" name="close"></icon>
</button>
</div> </div>
<div class="uk-modal-body"> <div class="uk-modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> </div>
<div class="uk-modal-footer uk-text-right"> <div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="button">Save</button> <button class="uk-button uk-button-primary uk-margin-left" type="button">Save</button>
</div> </div>
</div> </div>
</div> </div>
@ -773,33 +793,4 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-container ">
<button class="uk-button portal-button">Button</button>
<div class="portal-color">portal-color</div>
<div class="portal-secondary-color">portal-secondary-color</div>
<div class="portal-background-color">portal-background-color</div>
<a class="uk-link portal-link">portal-link</a>
<div class="portal-box">portal-box</div>
<div><span class="portal-icon-button uk-icon uk-icon-button" uk-icon="icon: check"></span> portal-icon-button
uk-icon-button uk-icon</div>
</div>
<div class="uk-container uk-container-small portal-box">
<div class=" uk-text-large">small container</div>
</div>
<div class="uk-container portal-box">
<div class=" uk-text-large">large container</div>
</div>
<div class="uk-container uk-container-large portal-box">
<div class=" uk-text-large">large container</div>
</div>
.

View File

@ -1,4 +1,6 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {ValidatorFn, Validators} from "@angular/forms";
import {StringUtils} from "../string-utils.class";
@Component({ @Component({
@ -7,5 +9,8 @@ import {Component} from '@angular/core';
}) })
export class ThemeComponent { export class ThemeComponent {
url: string = 'https://example.com';
logoURL: string = 'https://example.com/test.png';
required: ValidatorFn = Validators.required;
urlValidator: ValidatorFn = StringUtils.urlValidator;
} }

View File

@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import {ThemeRoutingModule} from "./theme-routing.module"; import {ThemeRoutingModule} from "./theme-routing.module";
import {ThemeComponent} from "./theme.component"; import {ThemeComponent} from "./theme.component";
import {IconsModule} from "../icons/icons.module";
import {InputModule} from "../../sharedComponents/input/input.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, CommonModule, RouterModule,
ThemeRoutingModule ThemeRoutingModule, IconsModule, InputModule
], ],
declarations: [ declarations: [
ThemeComponent ThemeComponent