Skip to content

Commit

Permalink
Merge branch 'feature/angular-examples' into 'main'
Browse files Browse the repository at this point in the history 
Feature/angular examples

See merge request siemens-ix/siemens-ix!29
  • Loading branch information
@danielleroux
danielleroux committed Sep 5, 2022
2 parents 23eb234 + 4c12c6a commit b29f7c0
Show file tree
Hide file tree
Showing 152 changed files with 2,944 additions and 3 deletions.
158 changes: 158 additions & 0 deletions packages/angular-test-app/src/app/app-routing.module.ts
View file
@@ -1,14 +1,73 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutAndLegal } from 'src/preview-examples/about-and-legal';
import { AGGrid } from 'src/preview-examples/aggrid';
import { BasicNavigation } from 'src/preview-examples/basic-navigation';
import { BasicNavigationWithOutHeader } from 'src/preview-examples/basic-navigation-without-header';
import { Blind } from 'src/preview-examples/blind';
import { Breadcrumb } from 'src/preview-examples/breadcrumb';
import { BreadcrumbNextItems } from 'src/preview-examples/breadcrumb-next-items';
import { BreadcrumbTrucate } from 'src/preview-examples/breadcrumb-truncate';
import { ButtonGroup } from 'src/preview-examples/button-group';
import { ButtonSelected } from 'src/preview-examples/button-selected';
import { ButtonWithIcon } from 'src/preview-examples/button-with-icon';
import { Buttons } from 'src/preview-examples/buttons';
import { CategoryFilter } from 'src/preview-examples/category-filter';
import { CategoryFilterSuggestions } from 'src/preview-examples/category-filter-suggestions';
import { Checkbox } from 'src/preview-examples/checkbox';
import { CheckboxIndeterminate } from 'src/preview-examples/checkbox-indeterminate';
import { Chip } from 'src/preview-examples/chip';
import { Datepicker } from 'src/preview-examples/datepicker';
import { Datetimepicker } from 'src/preview-examples/datetimepicker';
import { Drawer } from 'src/preview-examples/drawer';
import { DrawerFullHeight } from 'src/preview-examples/drawer-full-height';
import { Dropdown } from 'src/preview-examples/dropdown';
import { DropdownIcon } from 'src/preview-examples/dropdown-icon';
import { EventList } from 'src/preview-examples/event-list';
import { EventListCompact } from 'src/preview-examples/event-list-compact';
import { EventListCustomItemHeight } from 'src/preview-examples/event-list-custom-item-height';
import { EventListSelected } from 'src/preview-examples/event-list-selected';
import { ExpandingSearch } from 'src/preview-examples/expanding-search';
import { FlipTile } from 'src/preview-examples/flip-tile';
import { Group } from 'src/preview-examples/group';
import { GroupContextMenu } from 'src/preview-examples/group-context-menu';
import { GroupCustomEntry } from 'src/preview-examples/group-custom-entry';
import { GroupHeaderSuppressed } from 'src/preview-examples/group-header-suppressed';
import { Input } from 'src/preview-examples/input';
import { InputDisabled } from 'src/preview-examples/input-disabled';
import { InputReadonly } from 'src/preview-examples/input-readonly';
import { InputWithIcon } from 'src/preview-examples/input-with-icon';
import { Kpi } from 'src/preview-examples/kpi';
import { MessageBar } from 'src/preview-examples/message-bar';
import { Modal } from 'src/preview-examples/modal';
import { Pill } from 'src/preview-examples/pill';
import { PopoverNews } from 'src/preview-examples/popover-news';
import { Radiobutton } from 'src/preview-examples/radio-button';
import { Select } from 'src/preview-examples/select';
import { SelectEditable } from 'src/preview-examples/select-editable';
import { SelectMultiple } from 'src/preview-examples/select-multiple';
import { Settings } from 'src/preview-examples/settings';
import { Spinner } from 'src/preview-examples/spinner';
import { SpinnerLarge } from 'src/preview-examples/spinner-large';
import { SplitButton } from 'src/preview-examples/split-button';
import { SplitButtonIcons } from 'src/preview-examples/split-button-icons';
import { Tabs } from 'src/preview-examples/tabs';
import { Textarea } from 'src/preview-examples/textarea';
import { TextareaDisabled } from 'src/preview-examples/textarea-disabled';
import { TextareaReadonly } from 'src/preview-examples/textarea-readonly';
import { Tile } from 'src/preview-examples/tile';
import { Timepicker } from 'src/preview-examples/timepicker';
import { Toast } from 'src/preview-examples/toast';
import { ToastCustom } from 'src/preview-examples/toast-custom';
import { Toggle } from 'src/preview-examples/toggle';
import { ToggleColor } from 'src/preview-examples/toggle-color';
import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
import { Tree } from 'src/preview-examples/tree';
import { TreeCustom } from 'src/preview-examples/tree-custom';
import { Upload } from 'src/preview-examples/upload';
import { VerticalTabs } from 'src/preview-examples/vertical-tabs';
import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-avatar';
import { NavigationTestComponent } from './components/navigation-test.component';

const routes: Routes = [
Expand Down Expand Up @@ -80,6 +139,105 @@ const routes: Routes = [
path: 'tree-custom',
component: TreeCustom,
},
{
path: 'about-and-legal',
component: AboutAndLegal,
},
{
path: 'basic-navigation-without-header',
component: BasicNavigationWithOutHeader,
},
{
path: 'blind',
component: Blind,
},
{ path: 'breadcrumb-next-items', component: BreadcrumbNextItems },
{ path: 'breadcrumb-truncate', component: BreadcrumbTrucate },
{ path: 'breadcrumb', component: Breadcrumb },
{ path: 'button-selected', component: ButtonSelected },
{ path: 'button-with-icon', component: ButtonWithIcon },
{
path: 'category-filter-suggestions',
component: CategoryFilterSuggestions,
},
{
path: 'category-filter',
component: CategoryFilter,
},
{
path: 'checkbox-indeterminate',
component: CheckboxIndeterminate,
},
{
path: 'checkbox',
component: Checkbox,
},
{
path: 'chip',
component: Chip,
},
{
path: 'datepicker',
component: Datepicker,
},
{
path: 'datetimepicker',
component: Datetimepicker,
},
{
path: 'drawer-full-height',
component: DrawerFullHeight,
},
{
path: 'drawer',
component: Drawer,
},
{ path: 'dropdown-icon', component: DropdownIcon },

{ path: 'dropdown', component: Dropdown },
{ path: 'event-list-compact', component: EventListCompact },
{
path: 'event-list-custom-item-height',
component: EventListCustomItemHeight,
},
{ path: 'event-list-selected', component: EventListSelected },
{ path: 'event-list', component: EventList },
{ path: 'expanding-search', component: ExpandingSearch },
{ path: 'flip-tile', component: FlipTile },
{ path: 'group-context-menu', component: GroupContextMenu },
{ path: 'group-custom-entry', component: GroupCustomEntry },
{ path: 'group-header-suppressed', component: GroupHeaderSuppressed },
{ path: 'group', component: Group },
{ path: 'input-disabled', component: InputDisabled },
{ path: 'input-readonly', component: InputReadonly },
{ path: 'input-with-icon', component: InputWithIcon },
{ path: 'input', component: Input },
{ path: 'kpi', component: Kpi },
{ path: 'message-bar', component: MessageBar },
{ path: 'pill', component: Pill },
{ path: 'popover-news', component: PopoverNews },
{ path: 'radio-button', component: Radiobutton },
{ path: 'select-editable', component: SelectEditable },
{ path: 'select-multiple', component: SelectMultiple },
{ path: 'select', component: Select },
{ path: 'settings', component: Settings },
{ path: 'spinner', component: Spinner },
{ path: 'spinner-large', component: SpinnerLarge },
{ path: 'split-button-icons', component: SplitButtonIcons },
{ path: 'split-button', component: SplitButton },
{ path: 'tabs', component: Tabs },
{ path: 'textarea', component: Textarea },
{ path: 'textarea-disabled', component: TextareaDisabled },
{ path: 'textarea-readonly', component: TextareaReadonly },
{ path: 'tile', component: Tile },
{ path: 'timepicker', component: Timepicker },
{ path: 'toggle-color', component: ToggleColor },
{ path: 'toggle-custom-disabled', component: ToggleCustomDisabled },
{ path: 'toggle-custom-label', component: ToggleCustomLabel },
{ path: 'toggle', component: Toggle },
{ path: 'upload', component: Upload },
{ path: 'vertical-tabs-with-avatar', component: VerticalTabsWithAvatar },
{ path: 'vertical-tabs', component: VerticalTabs },
],
},
];
Expand Down
119 changes: 118 additions & 1 deletion packages/angular-test-app/src/app/app.module.ts
View file
Expand Up @@ -10,12 +10,71 @@ import { ButtonGroup } from 'src/preview-examples/button-group';
import { Buttons } from 'src/preview-examples/buttons';

import { AgGridModule } from 'ag-grid-angular';
import { AboutAndLegal } from 'src/preview-examples/about-and-legal';
import { BasicNavigation } from 'src/preview-examples/basic-navigation';
import { BasicNavigationWithOutHeader } from 'src/preview-examples/basic-navigation-without-header';
import { Blind } from 'src/preview-examples/blind';
import { Breadcrumb } from 'src/preview-examples/breadcrumb';
import { BreadcrumbNextItems } from 'src/preview-examples/breadcrumb-next-items';
import { BreadcrumbTrucate } from 'src/preview-examples/breadcrumb-truncate';
import { ButtonSelected } from 'src/preview-examples/button-selected';
import { ButtonWithIcon } from 'src/preview-examples/button-with-icon';
import { CategoryFilter } from 'src/preview-examples/category-filter';
import { CategoryFilterSuggestions } from 'src/preview-examples/category-filter-suggestions';
import { Checkbox } from 'src/preview-examples/checkbox';
import { CheckboxIndeterminate } from 'src/preview-examples/checkbox-indeterminate';
import { Chip } from 'src/preview-examples/chip';
import { Datepicker } from 'src/preview-examples/datepicker';
import { Datetimepicker } from 'src/preview-examples/datetimepicker';
import { Drawer } from 'src/preview-examples/drawer';
import { DrawerFullHeight } from 'src/preview-examples/drawer-full-height';
import { Dropdown } from 'src/preview-examples/dropdown';
import { DropdownIcon } from 'src/preview-examples/dropdown-icon';
import { EventList } from 'src/preview-examples/event-list';
import { EventListCompact } from 'src/preview-examples/event-list-compact';
import { EventListCustomItemHeight } from 'src/preview-examples/event-list-custom-item-height';
import { EventListSelected } from 'src/preview-examples/event-list-selected';
import { ExpandingSearch } from 'src/preview-examples/expanding-search';
import { FlipTile } from 'src/preview-examples/flip-tile';
import { Group } from 'src/preview-examples/group';
import { GroupContextMenu } from 'src/preview-examples/group-context-menu';
import { GroupCustomEntry } from 'src/preview-examples/group-custom-entry';
import { GroupHeaderSuppressed } from 'src/preview-examples/group-header-suppressed';
import { Input } from 'src/preview-examples/input';
import { InputDisabled } from 'src/preview-examples/input-disabled';
import { InputReadonly } from 'src/preview-examples/input-readonly';
import { InputWithIcon } from 'src/preview-examples/input-with-icon';
import { Kpi } from 'src/preview-examples/kpi';
import { MessageBar } from 'src/preview-examples/message-bar';
import { Modal } from 'src/preview-examples/modal';
import { Pill } from 'src/preview-examples/pill';
import { PopoverNews } from 'src/preview-examples/popover-news';
import { Radiobutton } from 'src/preview-examples/radio-button';
import { Select } from 'src/preview-examples/select';
import { SelectEditable } from 'src/preview-examples/select-editable';
import { SelectMultiple } from 'src/preview-examples/select-multiple';
import { Settings } from 'src/preview-examples/settings';
import { Spinner } from 'src/preview-examples/spinner';
import { SpinnerLarge } from 'src/preview-examples/spinner-large';
import { SplitButton } from 'src/preview-examples/split-button';
import { SplitButtonIcons } from 'src/preview-examples/split-button-icons';
import { Tabs } from 'src/preview-examples/tabs';
import { Textarea } from 'src/preview-examples/textarea';
import { TextareaDisabled } from 'src/preview-examples/textarea-disabled';
import { TextareaReadonly } from 'src/preview-examples/textarea-readonly';
import { Tile } from 'src/preview-examples/tile';
import { Timepicker } from 'src/preview-examples/timepicker';
import { Toast } from 'src/preview-examples/toast';
import { ToastCustom } from 'src/preview-examples/toast-custom';
import { Toggle } from 'src/preview-examples/toggle';
import { ToggleColor } from 'src/preview-examples/toggle-color';
import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
import { Tree } from 'src/preview-examples/tree';
import { TreeCustom } from 'src/preview-examples/tree-custom';
import { Upload } from 'src/preview-examples/upload';
import { VerticalTabs } from 'src/preview-examples/vertical-tabs';
import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-avatar';
import { NavigationTestComponent } from './components/navigation-test.component';

@NgModule({
Expand All @@ -30,8 +89,66 @@ import { NavigationTestComponent } from './components/navigation-test.component'
ToastCustom,
Tree,
TreeCustom,

AboutAndLegal,
BasicNavigationWithOutHeader,
Blind,
BreadcrumbNextItems,
BreadcrumbTrucate,
Breadcrumb,
NavigationTestComponent,
ButtonSelected,
ButtonWithIcon,
CategoryFilterSuggestions,
CategoryFilter,
CheckboxIndeterminate,
Checkbox,
Chip,
Datepicker,
Datetimepicker,
DrawerFullHeight,
Drawer,
DropdownIcon,
Dropdown,
EventListCompact,
EventListCustomItemHeight,
EventListSelected,
EventList,
ExpandingSearch,
FlipTile,
GroupContextMenu,
GroupCustomEntry,
GroupHeaderSuppressed,
Group,
InputDisabled,
InputReadonly,
InputWithIcon,
Input,
Kpi,
MessageBar,
Pill,
PopoverNews,
Radiobutton,
SelectEditable,
SelectMultiple,
Select,
Settings,
Spinner,
SpinnerLarge,
SplitButtonIcons,
SplitButton,
Tabs,
Textarea,
TextareaReadonly,
TextareaDisabled,
Tile,
Timepicker,
ToggleColor,
ToggleCustomDisabled,
ToggleCustomLabel,
Toggle,
Upload,
VerticalTabsWithAvatar,
VerticalTabs,
],
imports: [
BrowserModule,
Expand Down
27 changes: 27 additions & 0 deletions packages/angular-test-app/src/preview-examples/about-and-legal.ts
View file
@@ -0,0 +1,27 @@
/*
* COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
*/
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
selector: 'app-about-and-legal',
template: `
<ix-basic-navigation>
<ix-menu #menu>
<ix-menu-about>
<ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
<ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
</ix-menu-about>
</ix-menu>
</ix-basic-navigation>
`,
})
export class AboutAndLegal implements AfterViewInit {
@ViewChild('menu', { read: ElementRef })
menuRef!: ElementRef<HTMLIxMenuElement>;

ngAfterViewInit() {
const { nativeElement } = this.menuRef;
nativeElement.toggleAbout(true);
}
}
17 changes: 17 additions & 0 deletions packages/angular-test-app/src/preview-examples/basic-navigation-without-header.ts
View file
@@ -0,0 +1,17 @@
/*
* COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
*/
import { Component } from '@angular/core';

@Component({
selector: 'app-basic-navigation-without-header',
template: `
<ix-basic-navigation hideHeader>
<ix-menu>
<ix-menu-item>Item 1</ix-menu-item>
<ix-menu-item>Item 2</ix-menu-item>
</ix-menu>
</ix-basic-navigation>
`,
})
export class BasicNavigationWithOutHeader {}
22 changes: 22 additions & 0 deletions packages/angular-test-app/src/preview-examples/blind.ts
View file
@@ -0,0 +1,22 @@
/*
* COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
*/
import { Component } from '@angular/core';

@Component({
selector: 'app-blind',
template: `
<ix-blind label="Example">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</ix-blind>
`,
})
export class Blind {}

0 comments on commit b29f7c0

Please sign in to comment.