Info List Item
5 | with an icon
6 | Info List Item
5 | this is a subtitle within an InfoListItem
6 | Info List Item Title
5 | Info List Item Subtitle
6 | Request Permission
5 | You must contact your system admin to view this content.
6 |
4 | 1
5 | 2
6 | 3
7 |
8 | `;
9 |
10 | @Component({
11 | selector: 'app-flex-spacer-demo',
12 | template: FLEX,
13 | })
14 | export class FlexComponent {}
15 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/score-card/examples/multi-line.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const MULTI_LINE = `
4 |
9 |
10 |
`;
11 |
12 | @Component({
13 | selector: 'app-basic-list-item-tag-demo',
14 | template: BASIC,
15 | })
16 | export class BasicExample {}
17 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/hero/examples/channel-value-children.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const CV_CHILDREN = `Settings
8 | Dense Info List Item 1
5 | Dense Info List Item 2
8 | Dense Info List Item 3
11 | Info List Item
6 | with a status indicator
7 | Settings
12 |
2 |
5 |
6 |
9 |
21 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-nav-item/drawer-nav-item-doc.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { DrawerNavItemDocModule } from './drawer-nav-item-doc.module';
3 | import { DrawerNavItemDocComponent } from './drawer-nav-item-doc.component';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 |
6 | describe('DrawerNavItemDoc', () => {
7 | beforeEach(() => {
8 | void TestBed.configureTestingModule({
9 | imports: [DrawerNavItemDocModule, RouterTestingModule],
10 | }).compileComponents();
11 | });
12 |
13 | it('should create', () => {
14 | const fixture = TestBed.createComponent(DrawerNavItemDocComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | void expect(app).toBeTruthy();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/mobile-stepper/examples/progress.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const PROGRESS = `
6 |
9 |
10 |
18 |
20 |
9 |
10 | ![User Menu Avatar]()
11 |
13 | `,
14 | host: {
15 | class: 'blui-user-menu-avatar',
16 | },
17 | })
18 | export class UserMenuAvatarComponent {
19 | @Input() avatarValue: string;
20 | @Input() avatarImage: string;
21 | }
22 |
--------------------------------------------------------------------------------
/src/docs/services/drawer-state/drawer-state.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ViewportService } from '../viewport/viewport.service';
3 |
4 | @Injectable({
5 | providedIn: 'root',
6 | })
7 | export class DrawerStateService {
8 | private drawerOpen: boolean;
9 | private selectedItem: string;
10 |
11 | constructor(viewportService: ViewportService) {
12 | this.drawerOpen = !viewportService.isMedium();
13 | }
14 |
15 | setDrawerOpen(drawerOpen: boolean): void {
16 | this.drawerOpen = drawerOpen;
17 | }
18 |
19 | getDrawerOpen(): boolean {
20 | return this.drawerOpen;
21 | }
22 |
23 | setSelectedItem(item: string): void {
24 | this.selectedItem = item;
25 | }
26 |
27 | getSelectedItem(): string {
28 | return this.selectedItem;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/channel-value/examples/unit-space.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const UNIT_SPACE = `
4 |
`;
10 |
11 | @Component({
12 | selector: 'app-unit-space-channel-value-demo',
13 | template: UNIT_SPACE,
14 | })
15 | export class UnitSpaceComponent {}
16 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-subheader/drawer-subheader-doc.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { DrawerSubheaderDocModule } from './drawer-subheader-doc.module';
4 | import { DrawerSubheaderDocComponent } from './drawer-subheader-doc.component';
5 |
6 | describe('DrawerBodyDocComponent', () => {
7 | beforeEach(() => {
8 | void TestBed.configureTestingModule({
9 | imports: [DrawerSubheaderDocModule, RouterTestingModule],
10 | }).compileComponents();
11 | });
12 |
13 | it('should create', () => {
14 | const fixture = TestBed.createComponent(DrawerSubheaderDocComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | void expect(app).toBeTruthy();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-nav-group/drawer-nav-group-doc.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { DrawerNavGroupDocComponent } from './drawer-nav-group-doc.component';
3 | import { DrawerNavGroupDocModule } from './drawer-nav-group-doc.module';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 |
6 | describe('DrawerNavItemGroupDocComponent', () => {
7 | beforeEach(() => {
8 | void TestBed.configureTestingModule({
9 | imports: [DrawerNavGroupDocModule, RouterTestingModule],
10 | }).compileComponents();
11 | });
12 |
13 | it('should create', () => {
14 | const fixture = TestBed.createComponent(DrawerNavGroupDocComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | void expect(app).toBeTruthy();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-footer/examples/basic.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const BASIC = `Footer Content Here
13 | Custom Content Goes here
7 |
7 | {{ label }}: boolean{{ isRequired ? '*' : '' }}
9 |
10 |
12 | `,
13 | })
14 | export class KnobBooleanComponent {
15 | @Input() label;
16 | @Input() value: boolean;
17 | @Input() hint: boolean;
18 | @Input() isRequired: boolean;
19 | @Output() valueChange = new EventEmitter{{ hint }}
11 |
4 | 25
5 | 75
6 | 200
7 |
8 |
9 | 25
10 | 50
11 | 75
12 |
13 | `;
14 |
15 | @Component({
16 | selector: 'app-pixel-spacer-demo',
17 | template: PIXELS,
18 | })
19 | export class PixelComponent {}
20 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/list-item-tag/list-item-tag-doc.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ListItemTagDocComponent } from './list-item-tag-doc.component';
3 | import { BasicExample } from './examples/basic.component';
4 | import { SharedCompDocsModule } from '../../shared/shared-comp-docs.module';
5 | import { ChannelValueModule, InfoListItemModule, ListItemTagModule } from 'src/lib/core';
6 | import { ComplexExample } from './examples/complex.component';
7 | import { RouterModule } from '@angular/router';
8 | import { PlaygroundComponent } from './examples/playground.component';
9 |
10 | @NgModule({
11 | declarations: [ListItemTagDocComponent, BasicExample, ComplexExample, PlaygroundComponent],
12 | imports: [SharedCompDocsModule, ListItemTagModule, ChannelValueModule, InfoListItemModule, RouterModule],
13 | exports: [ListItemTagDocComponent],
14 | })
15 | export class ListItemTagDocModule {}
16 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer/drawer-doc.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { DrawerModule, SpacerModule } from 'src/lib/core';
3 | import { SharedCompDocsModule } from '../../../shared/shared-comp-docs.module';
4 | import { DrawerDocComponent } from './drawer-doc.component';
5 | import { BasicExampleComponent } from './examples/basic.component';
6 | import { AnatomyComponent } from './examples/anatomy.component';
7 | import { RouterModule } from '@angular/router';
8 | import { FromListComponent } from './examples/from-list.component';
9 | import { PlaygroundComponent } from './examples/playground.component';
10 |
11 | @NgModule({
12 | declarations: [DrawerDocComponent, BasicExampleComponent, AnatomyComponent, FromListComponent, PlaygroundComponent],
13 | imports: [DrawerModule, SpacerModule, SharedCompDocsModule, RouterModule],
14 | exports: [DrawerDocComponent],
15 | })
16 | export class DrawerDocModule {}
17 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/info-list-item/examples/with-left-right-content.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const LEFT_RIGHT_CONTENT = `
6 |
9 | 8:32 AM
7 | 11/21/21
8 | Battery Fully Charged
10 | Your device is ready to use
11 | Settings
9 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Alarms
9 |
5 |
6 |
8 |
10 | `;
11 |
12 | @Component({
13 | selector: 'app-expanded-app-bar-demo',
14 | template: EXPANDED,
15 | styles: [
16 | `
17 | .scroll-container {
18 | width: 100%;
19 | max-width: 450px;
20 | max-height: 400px;
21 | overflow: auto;
22 | position: relative;
23 | }
24 | .content-body {
25 | padding: 16px;
26 | background: white;
27 | }
28 | `,
29 | ],
30 | })
31 | export class ExpandedComponent {
32 | filler = loremIpsum;
33 | }
34 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-layout/drawer-layout-doc.component.scss:
--------------------------------------------------------------------------------
1 | .drawer-layout-examples {
2 | .blui-drawer-layout {
3 | height: 240px;
4 | width: 100%;
5 | &.rail-example {
6 | height: calc(72px * 3 + 2px);
7 | }
8 | &.condensed-rail-example {
9 | height: calc(56px * 3);
10 | }
11 | }
12 | }
13 | .drawer-layout-examples {
14 | .playground-live-example-wrapper {
15 | padding: 1rem 0 !important;
16 | }
17 | .playground-live-example-wrapper,
18 | app-layout-playground {
19 | width: 100%;
20 | display: flex;
21 | justify-content: center;
22 | align-items: center;
23 | }
24 | .playground-container .blui-drawer-layout {
25 | height: 350px;
26 | width: calc(100vw - 850px);
27 | max-width: 700px;
28 | }
29 | .playground-container.md .blui-drawer-layout {
30 | width: calc(100vw - 500px - 32px);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/app-bar/examples/collapsed.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { loremIpsum } from './lorem-ipsum';
3 |
4 | export const COLLAPSED = `Content
7 | {{ filler }}
9 |
5 |
6 |
8 |
10 | `;
11 |
12 | @Component({
13 | selector: 'app-collapsed-app-bar-demo',
14 | template: COLLAPSED,
15 | styles: [
16 | `
17 | .scroll-container {
18 | width: 100%;
19 | max-width: 450px;
20 | max-height: 200px;
21 | overflow: auto;
22 | position: relative;
23 | }
24 | .content-body {
25 | padding: 16px;
26 | background: white;
27 | }
28 | `,
29 | ],
30 | })
31 | export class CollapsedComponent {
32 | filler = loremIpsum;
33 | }
34 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-nav-group/examples/with-spacer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const SPACER = `Content
7 | {{ filler }}
9 | Subheader Content Here
7 | Footer Content Here
17 | 
16 | {{item.title}}
8 |
6 | 
7 |
8 |
9 | ## Usage
10 |
11 | ```typescript
12 | // app.module.ts
13 | import { SpacerModule } from '@brightlayer-ui/angular-components';
14 | ...
15 | imports: [
16 | SpacerModule
17 | ],
18 | ...
19 | ```
20 |
21 | ## API
22 |
23 | Parent element (`7 |
26 |
27 | | @Input | Description | Type | Required | Default |
28 | | ------ | --------------------------------------- | -------- | -------- | ------- |
29 | | flex | Flex grow/shrink value for flex layouts | `number` | no | 1 |
30 | | height | Height (in px) for static layouts | `number` | no | |
31 | | width | Width (in px) for static layouts | `number` | no | |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/lib/core/hero/hero-banner.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
2 |
3 | /**
4 | * [HeroBanner Component](https://brightlayer-ui-components.github.io/angular/?path=/info/components-hero--readme)
5 | *
6 | * The `
2 |
5 |
21 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/user-menu/examples/bottomsheet.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const BOTTOMSHEET = `
6 |
13 |
14 | {{ activeStep + 1 }} / {{ stepsArray.length }}
15 | {{item.title}}
8 |
14 | App Content Here.
15 |
16 |
11 |
14 | Nav Group Title Content
12 | Info List Item
6 | with a ListItemTag component to the right
7 |
9 |
14 |
15 |
19 |
20 |
21 | View Location
21 |
5 |
11 |
13 |
15 | `;
16 |
17 | @Component({
18 | selector: 'app-snap-app-bar-demo',
19 | template: SNAP,
20 | styles: [
21 | `
22 | .scroll-container {
23 | width: 100%;
24 | max-width: 450px;
25 | max-height: 400px;
26 | overflow: auto;
27 | position: relative;
28 | }
29 | .content-body {
30 | padding: 16px;
31 | background: white;
32 | }
33 | `,
34 | ],
35 | })
36 | export class SnapAppBarComponent {
37 | filler = loremIpsum;
38 | }
39 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/empty-state/examples/within-card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const WITHIN_CARD = `Content
12 | {{ filler }}
14 |
6 |
9 |
12 | API Documentation
7 | Toolbar Title
5 | Log Out
11 | Status
6 |
7 | Output Voltage
11 | Phase A · Phase B · Phase C
12 | Output Current
19 | 15 |20 | `, 21 | encapsulation: ViewEncapsulation.None, 22 | styleUrls: ['example-code.component.scss'], 23 | }) 24 | export class ExampleCodeComponent { 25 | @Input() snippet: string; 26 | @Input() dataLine: string; 27 | @Input() copyButtonOnHover = false; 28 | 29 | isHoverSnippet: boolean; 30 | 31 | ngAfterViewInit(): void { 32 | /* This triggers a code-highlighting event. */ 33 | window.dispatchEvent(new Event('resize')); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/docs/pages/component-docs/components/user-menu/examples/non-text-avatar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | export const NON_TEXT_AVATAR = `16 |18 | 19 |
4 |
5 |
6 |
7 | settings
8 |
10 |
11 |
12 |
13 |
14 | pets
15 |
16 |
17 | settings
18 |
20 |
21 |
22 |
23 | `;
24 |
25 | @Component({
26 | selector: 'app-non-text-avatar-user-menu-demo',
27 | template: NON_TEXT_AVATAR,
28 | })
29 | export class NonTextAvatarComponent {
30 | open1 = false;
31 | open2 = false;
32 | }
33 |
--------------------------------------------------------------------------------
/src/docs/components/pxb-logo/pxb-logo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-pxb-logo',
5 | template: `
6 |
18 | `,
19 | styleUrls: ['pxb-logo.component.scss'],
20 | })
21 | export class PxbLogoComponent {
22 | @Input() size: number;
23 | @Input() color: string;
24 | }
25 |
--------------------------------------------------------------------------------
/src/lib/core/drawer/drawer-layout/drawer-layout.component.scss:
--------------------------------------------------------------------------------
1 | $transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
2 |
3 | .blui-drawer-layout {
4 | display: flex;
5 | height: 100vh;
6 | }
7 |
8 | /* RTL */
9 | [dir='rtl'] .blui-drawer-layout-content > .mat-drawer-side {
10 | border-left: 0; // Border-left is provided by the Drawer component.
11 | }
12 |
13 | .blui-drawer-layout-content {
14 | height: 100%;
15 | width: 100%;
16 | transition: none;
17 | display: flex;
18 |
19 | > mat-sidenav-content {
20 | // Do not let angular material control the margin. They will attempt to apply their own margin even though we are calculating our own.
21 | margin-left: 0 !important;
22 | margin-right: 0 !important;
23 | }
24 |
25 | > .mat-drawer-side {
26 | border-right: none;
27 | }
28 |
29 | > .blui-drawer-layout-sidenav .blui-drawer-content {
30 | transition: none;
31 | width: 100%;
32 | &.blui-drawer-collapse {
33 | width: 100%;
34 | }
35 | }
36 |
37 | > .blui-drawer-layout-sidenav,
38 | .blui-drawer-layout-nav-content {
39 | min-height: 100%;
40 | transition: none;
41 | &.blui-drawer-layout-smooth {
42 | transition: $transition;
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-layout/examples/rail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | export const RAIL = `Settings
9 | Settings
19 |
20 | App Content Here.
21 |
22 |
20 | App Content Here.
21 |
22 |
14 |
16 | `,
17 | styles: [
18 | `
19 | .blui-drawer-body-content {
20 | height: 100%;
21 | display: flex;
22 | flex-direction: column;
23 | }
24 | .blui-drawer-body-closed {
25 | overflow-x: hidden;
26 | }
27 | `,
28 | ],
29 | host: {
30 | class: 'blui-drawer-body',
31 | },
32 | })
33 | export class DrawerBodyComponent extends StateListener {
34 | constructor(stateManagerService: DrawerStateManagerService, changeDetectorRef: ChangeDetectorRef) {
35 | super(stateManagerService, changeDetectorRef);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/lib/utils/utils.ts:
--------------------------------------------------------------------------------
1 | import { ElementRef } from '@angular/core';
2 |
3 | export type ContentPair = {
4 | selector: string;
5 | ref: ElementRef;
6 | };
7 |
8 | export function requireInput
13 |
25 |
14 |
17 | v2.4.0
15 | 10:33:05 03/12/22
16 |
18 | 
19 |
24 |
19 |
20 |
23 | Copyright © Eaton
21 | All Rights Reserved
22 | 
6 |
7 | ## Usage
8 |
9 | ```typescript
10 | // app.module.ts
11 | import { ListItemTagModule } from '@brightlayer-ui/angular-components';
12 | ...
13 | imports: [
14 | ListItemTagModule
15 | ],
16 | ...
17 | ```
18 |
19 | ## API
20 |
21 | Parent element (`blui-list-item-tag`) attributes:
22 |
23 |
24 |
25 | | @Input | Description | Type | Required | Default |
26 | | --------------- | ----------------------------- | -------- | -------- | ------- |
27 | | backgroundColor | Color of the label background | `string` | no | |
28 | | fontColor | Color of the label | `string` | no | |
29 | | label | The label text | `string` | yes | |
30 |
31 |
32 |
33 | ### Classes
34 |
35 | Each Brightlayer UI component has classes which can be used to override component styles:
36 |
37 | | Name | Description |
38 | | -------------------------- | ---------------------------------- |
39 | | blui-list-item-tag | Styles applied to the tag |
40 | | blui-list-item-tag-content | Styles applied to the root element |
41 | | blui-list-item-tag-label | Styles applied to the label @Input |
42 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/components/drawer/drawer-layout/drawer-layout-doc.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { DrawerModule } from 'src/lib/core';
3 | import { SharedCompDocsModule } from '../../../shared/shared-comp-docs.module';
4 | import { PlaygroundComponent } from './examples/playground.component';
5 | import { DrawerLayoutDocComponent } from './drawer-layout-doc.component';
6 | import { PersistentVariantExampleComponent } from './examples/persistent.component';
7 | import { PermanentVariantExampleComponent } from './examples/permanent.component';
8 | import { TemporaryVariantExampleComponent } from './examples/temporary.component';
9 | import { MatToolbarModule } from '@angular/material/toolbar';
10 | import { RailVariantExampleComponent } from './examples/rail.component';
11 | import { RailCondensedVariantExampleComponent } from './examples/rail-condensed.component';
12 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
13 |
14 | @NgModule({
15 | declarations: [
16 | DrawerLayoutDocComponent,
17 | TemporaryVariantExampleComponent,
18 | RailVariantExampleComponent,
19 | PersistentVariantExampleComponent,
20 | PermanentVariantExampleComponent,
21 | PlaygroundComponent,
22 | RailCondensedVariantExampleComponent,
23 | ],
24 | imports: [DrawerModule, BrowserAnimationsModule, SharedCompDocsModule, MatToolbarModule],
25 | exports: [DrawerLayoutDocComponent],
26 | })
27 | export class DrawerLayoutDocModule {}
28 |
--------------------------------------------------------------------------------
/src/docs/pages/component-docs/shared/knobs/knob-select.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 | import { FormControl, Validators } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'app-select-knob',
6 | template: `
7 | title
10 |
10 |
12 |
13 |
15 |
16 |
18 | title
10 | title
11 | title
12 |
15 |
16 |
19 |
20 |
21 |
24 |
25 |
26 |
29 |
30 |
31 | `;
32 |
33 | @Component({
34 | selector: 'app-dots-mobile-stepper-demo',
35 | template: DOTS,
36 | })
37 | export class DotsComponent {
38 | activeStep = 0;
39 | }
40 |
--------------------------------------------------------------------------------