@daffodil/design 0.39.8 → 0.39.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/atoms/button/button.component.d.ts +5 -0
- package/bundles/daffodil-design-card-examples.umd.js +152 -14
- package/bundles/daffodil-design-card-examples.umd.js.map +1 -1
- package/bundles/daffodil-design-card-examples.umd.min.js +1 -1
- package/bundles/daffodil-design-card-examples.umd.min.js.map +1 -1
- package/bundles/daffodil-design-container-examples.umd.js +65 -0
- package/bundles/daffodil-design-container-examples.umd.js.map +1 -0
- package/bundles/daffodil-design-container-examples.umd.min.js +2 -0
- package/bundles/daffodil-design-container-examples.umd.min.js.map +1 -0
- package/bundles/daffodil-design-navbar-examples.umd.js +177 -0
- package/bundles/daffodil-design-navbar-examples.umd.js.map +1 -0
- package/bundles/daffodil-design-navbar-examples.umd.min.js +2 -0
- package/bundles/daffodil-design-navbar-examples.umd.min.js.map +1 -0
- package/bundles/daffodil-design.umd.js +300 -51
- package/bundles/daffodil-design.umd.js.map +1 -1
- package/bundles/daffodil-design.umd.min.js +2 -2
- package/bundles/daffodil-design.umd.min.js.map +1 -1
- package/card/examples/basic-card/basic-card.component.d.ts +1 -0
- package/card/examples/card-orientation/card-orientation.component.d.ts +9 -0
- package/card/examples/card-orientation/card-orientation.module.d.ts +2 -0
- package/card/examples/card-theming/card-theming.component.d.ts +4 -2
- package/card/examples/daffodil-design-card-examples.d.ts +2 -0
- package/card/examples/daffodil-design-card-examples.metadata.json +1 -1
- package/card/examples/linkable-card/linkable-card.component.d.ts +8 -0
- package/card/examples/public_api.d.ts +5 -1
- package/card/examples/raised-card/raised-card.component.d.ts +6 -0
- package/card/examples/stroked-card/stroked-card.component.d.ts +8 -0
- package/card/examples/stroked-card/stroked-card.module.d.ts +2 -0
- package/container/examples/container-sizes/container-sizes.component.d.ts +8 -0
- package/container/examples/container-sizes/container-sizes.module.d.ts +2 -0
- package/container/examples/daffodil-design-container-examples.d.ts +4 -0
- package/container/examples/daffodil-design-container-examples.metadata.json +1 -0
- package/container/examples/examples.d.ts +2 -0
- package/container/examples/index.d.ts +1 -0
- package/container/examples/package.json +11 -0
- package/container/examples/public_api.d.ts +3 -0
- package/core/article-encapsulated/article-encapsulated-mixin.d.ts +15 -0
- package/core/article-encapsulated/public_api.d.ts +1 -0
- package/core/manage-container-layout/manage-container-layout-mixin.d.ts +17 -0
- package/core/manage-container-layout/public_api.d.ts +1 -0
- package/core/public_api.d.ts +2 -0
- package/daff-theme.scss +278 -129
- package/daffodil-design.metadata.json +1 -1
- package/esm2015/atoms/button/button.component.js +3 -2
- package/esm2015/atoms/container/container.component.js +1 -1
- package/esm2015/atoms/image/image.component.js +2 -2
- package/esm2015/card/examples/basic-card/basic-card.component.js +7 -3
- package/esm2015/card/examples/basic-card/basic-card.module.js +3 -1
- package/esm2015/card/examples/card-orientation/card-orientation.component.js +24 -0
- package/esm2015/card/examples/card-orientation/card-orientation.module.js +27 -0
- package/esm2015/card/examples/card-theming/card-theming.component.js +13 -4
- package/esm2015/card/examples/daffodil-design-card-examples.js +3 -1
- package/esm2015/card/examples/linkable-card/linkable-card.component.js +19 -3
- package/esm2015/card/examples/linkable-card/linkable-card.module.js +3 -1
- package/esm2015/card/examples/public_api.js +7 -1
- package/esm2015/card/examples/raised-card/raised-card.component.js +17 -3
- package/esm2015/card/examples/raised-card/raised-card.module.js +3 -3
- package/esm2015/card/examples/stroked-card/stroked-card.component.js +27 -0
- package/esm2015/card/examples/stroked-card/stroked-card.module.js +27 -0
- package/esm2015/container/examples/container-sizes/container-sizes.component.js +23 -0
- package/esm2015/container/examples/container-sizes/container-sizes.module.js +23 -0
- package/esm2015/container/examples/daffodil-design-container-examples.js +5 -0
- package/esm2015/container/examples/examples.js +5 -0
- package/esm2015/container/examples/index.js +2 -0
- package/esm2015/container/examples/public_api.js +4 -0
- package/esm2015/core/article-encapsulated/article-encapsulated-mixin.js +12 -0
- package/esm2015/core/article-encapsulated/public_api.js +2 -0
- package/esm2015/core/manage-container-layout/manage-container-layout-mixin.js +14 -0
- package/esm2015/core/manage-container-layout/public_api.js +2 -0
- package/esm2015/core/public_api.js +3 -1
- package/esm2015/molecules/accordion/accordion/accordion.component.js +24 -3
- package/esm2015/molecules/article/article/article.component.js +1 -1
- package/esm2015/molecules/callout/callout/callout.component.js +5 -3
- package/esm2015/molecules/card/card/card.component.js +78 -15
- package/esm2015/molecules/card/card-content/card-content.directive.js +18 -0
- package/esm2015/molecules/card/card-icon/card-icon.directive.js +18 -0
- package/esm2015/molecules/card/card.module.js +9 -3
- package/esm2015/molecules/card/public_api.js +4 -2
- package/esm2015/molecules/feature/feature/feature.component.js +4 -1
- package/esm2015/molecules/hero/hero/hero.component.js +6 -4
- package/esm2015/molecules/link-set/link-set/link-set.component.js +23 -4
- package/esm2015/molecules/list/list/list.component.js +19 -5
- package/esm2015/molecules/media-gallery/media-gallery.component.js +20 -4
- package/esm2015/molecules/navbar/navbar.component.js +11 -9
- package/esm2015/navbar/examples/basic-navbar/basic-navbar.component.js +13 -0
- package/esm2015/navbar/examples/basic-navbar/basic-navbar.module.js +20 -0
- package/esm2015/navbar/examples/contained-navbar/contained-navbar.component.js +13 -0
- package/esm2015/navbar/examples/contained-navbar/contained-navbar.module.js +20 -0
- package/esm2015/navbar/examples/daffodil-design-navbar-examples.js +5 -0
- package/esm2015/navbar/examples/examples.js +11 -0
- package/esm2015/navbar/examples/index.js +2 -0
- package/esm2015/navbar/examples/navbar-theming/navbar-theming.component.js +27 -0
- package/esm2015/navbar/examples/navbar-theming/navbar-theming.module.js +21 -0
- package/esm2015/navbar/examples/public_api.js +10 -0
- package/esm2015/navbar/examples/raised-navbar/raised-navbar.component.js +13 -0
- package/esm2015/navbar/examples/raised-navbar/raised-navbar.module.js +19 -0
- package/fesm2015/daffodil-design-card-examples.js +145 -11
- package/fesm2015/daffodil-design-card-examples.js.map +1 -1
- package/fesm2015/daffodil-design-container-examples.js +54 -0
- package/fesm2015/daffodil-design-container-examples.js.map +1 -0
- package/fesm2015/daffodil-design-navbar-examples.js +142 -0
- package/fesm2015/daffodil-design-navbar-examples.js.map +1 -0
- package/fesm2015/daffodil-design.js +238 -42
- package/fesm2015/daffodil-design.js.map +1 -1
- package/molecules/accordion/accordion/accordion.component.d.ts +20 -1
- package/molecules/callout/callout/callout.component.d.ts +10 -0
- package/molecules/card/card/card.component.d.ts +42 -11
- package/molecules/card/card-content/card-content.directive.d.ts +6 -0
- package/molecules/card/card-icon/card-icon.directive.d.ts +6 -0
- package/molecules/card/public_api.d.ts +3 -1
- package/molecules/feature/feature/feature.component.d.ts +3 -0
- package/molecules/hero/hero/hero.component.d.ts +11 -1
- package/molecules/link-set/link-set/link-set.component.d.ts +20 -1
- package/molecules/list/list/list.component.d.ts +19 -3
- package/molecules/media-gallery/media-gallery.component.d.ts +20 -3
- package/molecules/navbar/navbar.component.d.ts +10 -5
- package/navbar/examples/basic-navbar/basic-navbar.component.d.ts +2 -0
- package/navbar/examples/basic-navbar/basic-navbar.module.d.ts +2 -0
- package/navbar/examples/contained-navbar/contained-navbar.component.d.ts +2 -0
- package/navbar/examples/contained-navbar/contained-navbar.module.d.ts +2 -0
- package/navbar/examples/daffodil-design-navbar-examples.d.ts +4 -0
- package/navbar/examples/daffodil-design-navbar-examples.metadata.json +1 -0
- package/navbar/examples/examples.d.ts +2 -0
- package/navbar/examples/index.d.ts +1 -0
- package/navbar/examples/navbar-theming/navbar-theming.component.d.ts +8 -0
- package/navbar/examples/navbar-theming/navbar-theming.module.d.ts +2 -0
- package/navbar/examples/package.json +11 -0
- package/navbar/examples/public_api.d.ts +9 -0
- package/navbar/examples/raised-navbar/raised-navbar.component.d.ts +2 -0
- package/navbar/examples/raised-navbar/raised-navbar.module.d.ts +2 -0
- package/package.json +2 -2
@@ -1,18 +1,23 @@
|
|
1
1
|
import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
2
|
+
import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
|
2
3
|
import { CommonModule } from '@angular/common';
|
4
|
+
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
3
5
|
import { DaffCardModule, DaffImageModule, DaffButtonModule } from '@daffodil/design';
|
4
6
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
5
7
|
import { RouterModule } from '@angular/router';
|
6
8
|
|
7
9
|
class BasicCardComponent {
|
10
|
+
constructor() {
|
11
|
+
this.faMapMarked = faMapMarked;
|
12
|
+
}
|
8
13
|
}
|
9
14
|
BasicCardComponent.decorators = [
|
10
15
|
{ type: Component, args: [{
|
11
16
|
// eslint-disable-next-line @angular-eslint/component-selector
|
12
17
|
selector: 'basic-card',
|
13
|
-
template: "<daff-card>\n
|
18
|
+
template: "<daff-card>\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n <fa-icon daffCardIcon [icon]=\"faMapMarked\"></fa-icon>\n <div daffCardTagline>Basel, Switzerland</div>\n <h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors.</p>\n <p>The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n </div>\n <div daffCardActions>\n <button daff-button color=\"theme-contrast\">Learn More</button>\n </div>\n</daff-card>\n",
|
14
19
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
15
|
-
styles: ["
|
20
|
+
styles: ["daff-card{max-width:480px}"]
|
16
21
|
},] }
|
17
22
|
];
|
18
23
|
|
@@ -28,6 +33,7 @@ BasicCardModule.decorators = [
|
|
28
33
|
DaffCardModule,
|
29
34
|
DaffImageModule,
|
30
35
|
DaffButtonModule,
|
36
|
+
FontAwesomeModule,
|
31
37
|
],
|
32
38
|
exports: [
|
33
39
|
BasicCardComponent,
|
@@ -35,21 +41,72 @@ BasicCardModule.decorators = [
|
|
35
41
|
},] }
|
36
42
|
];
|
37
43
|
|
44
|
+
class CardOrientationComponent {
|
45
|
+
constructor() {
|
46
|
+
this.faMapMarked = faMapMarked;
|
47
|
+
this.orientationControl = new FormControl('');
|
48
|
+
this.options = [
|
49
|
+
{ value: '', label: 'Default' },
|
50
|
+
{ value: 'vertical', label: 'Vertical' },
|
51
|
+
{ value: 'horizontal', label: 'Horizontal' },
|
52
|
+
];
|
53
|
+
}
|
54
|
+
}
|
55
|
+
CardOrientationComponent.decorators = [
|
56
|
+
{ type: Component, args: [{
|
57
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
58
|
+
selector: 'card-orientation',
|
59
|
+
template: "<daff-card [orientation]=\"orientationControl.value\">\n <daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n <fa-icon daffCardIcon [icon]=\"faMapMarked\"></fa-icon>\n <div daffCardTagline>Basel, Switzerland</div>\n <h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n </div>\n\t<div daffCardActions>\n <button daff-button color=\"theme-contrast\">Learn More</button>\n </div>\n</daff-card>\n\n<select [formControl]=\"orientationControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
60
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
61
|
+
styles: [".daff-card--vertical{max-width:560px}"]
|
62
|
+
},] }
|
63
|
+
];
|
64
|
+
|
65
|
+
class CardOrientationModule {
|
66
|
+
}
|
67
|
+
CardOrientationModule.decorators = [
|
68
|
+
{ type: NgModule, args: [{
|
69
|
+
declarations: [
|
70
|
+
CardOrientationComponent,
|
71
|
+
],
|
72
|
+
imports: [
|
73
|
+
CommonModule,
|
74
|
+
ReactiveFormsModule,
|
75
|
+
DaffCardModule,
|
76
|
+
DaffImageModule,
|
77
|
+
DaffButtonModule,
|
78
|
+
FontAwesomeModule,
|
79
|
+
],
|
80
|
+
exports: [
|
81
|
+
CardOrientationComponent,
|
82
|
+
],
|
83
|
+
},] }
|
84
|
+
];
|
85
|
+
|
38
86
|
class CardThemingComponent {
|
39
87
|
constructor() {
|
40
|
-
this.color = 'primary';
|
41
88
|
this.colorControl = new FormControl('');
|
89
|
+
this.options = [
|
90
|
+
{ value: '', label: 'Default' },
|
91
|
+
{ value: 'primary', label: 'Primary' },
|
92
|
+
{ value: 'secondary', label: 'Secondary' },
|
93
|
+
{ value: 'tertiary', label: 'Tertiary' },
|
94
|
+
{ value: 'theme', label: 'Theme' },
|
95
|
+
{ value: 'theme-contrast', label: 'Theme Contrast' },
|
96
|
+
{ value: 'black', label: 'Black' },
|
97
|
+
{ value: 'white', label: 'White' },
|
98
|
+
];
|
42
99
|
}
|
43
100
|
}
|
44
101
|
CardThemingComponent.decorators = [
|
45
102
|
{ type: Component, args: [{
|
46
103
|
// eslint-disable-next-line @angular-eslint/component-selector
|
47
104
|
selector: 'card-theming',
|
48
|
-
template: "<daff-card [color]=\"colorControl.value\">\n <div daffCardTagline>Card Tagline</div>\n <div daffCardTitle>Title</div>\n <p>Cards are themable.</p>\n</daff-card>\n\n<select [formControl]=\"colorControl\">\n
|
105
|
+
template: "<daff-card [color]=\"colorControl.value\">\n <div daffCardTagline>Card Tagline</div>\n <div daffCardTitle>Title</div>\n <div daffCardContent>\n <p>Cards are themable.</p>\n </div>\n</daff-card>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
49
106
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
50
107
|
styles: [`
|
51
108
|
daff-card {
|
52
|
-
max-width:
|
109
|
+
max-width: 480px;
|
53
110
|
}
|
54
111
|
`]
|
55
112
|
},] }
|
@@ -75,14 +132,29 @@ CardThemingModule.decorators = [
|
|
75
132
|
];
|
76
133
|
|
77
134
|
class LinkableCardComponent {
|
135
|
+
constructor() {
|
136
|
+
this.basicColorControl = new FormControl('');
|
137
|
+
this.raisedColorControl = new FormControl('');
|
138
|
+
this.strokedColorControl = new FormControl('');
|
139
|
+
this.options = [
|
140
|
+
{ value: '', label: 'Default' },
|
141
|
+
{ value: 'primary', label: 'Primary' },
|
142
|
+
{ value: 'secondary', label: 'Secondary' },
|
143
|
+
{ value: 'tertiary', label: 'Tertiary' },
|
144
|
+
{ value: 'theme', label: 'Theme' },
|
145
|
+
{ value: 'theme-contrast', label: 'Theme Contrast' },
|
146
|
+
{ value: 'black', label: 'Black' },
|
147
|
+
{ value: 'white', label: 'White' },
|
148
|
+
];
|
149
|
+
}
|
78
150
|
}
|
79
151
|
LinkableCardComponent.decorators = [
|
80
152
|
{ type: Component, args: [{
|
81
153
|
// eslint-disable-next-line @angular-eslint/component-selector
|
82
154
|
selector: 'linkable-card',
|
83
|
-
template: "<a
|
155
|
+
template: "<a daff-card href=\"https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0\" target=\"_blank\" [color]=\"basicColorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</a>\n\n<select [formControl]=\"basicColorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>\n\n<a daff-raised-card href=\"https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0\" target=\"_blank\" [color]=\"raisedColorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</a>\n\n<select [formControl]=\"strokedColorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>\n\n<a daff-stroked-card href=\"https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0\" target=\"_blank\" [color]=\"strokedColorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</a>\n\n<select [formControl]=\"strokedColorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
84
156
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
85
|
-
styles: ["
|
157
|
+
styles: ["a.daff-card,a.daff-raised-card,a.daff-stroked-card{max-width:480px}"]
|
86
158
|
},] }
|
87
159
|
];
|
88
160
|
|
@@ -96,6 +168,7 @@ LinkableCardModule.decorators = [
|
|
96
168
|
imports: [
|
97
169
|
CommonModule,
|
98
170
|
RouterModule,
|
171
|
+
ReactiveFormsModule,
|
99
172
|
DaffCardModule,
|
100
173
|
DaffImageModule,
|
101
174
|
DaffButtonModule,
|
@@ -107,14 +180,27 @@ LinkableCardModule.decorators = [
|
|
107
180
|
];
|
108
181
|
|
109
182
|
class RaisedCardComponent {
|
183
|
+
constructor() {
|
184
|
+
this.colorControl = new FormControl('');
|
185
|
+
this.options = [
|
186
|
+
{ value: '', label: 'Default' },
|
187
|
+
{ value: 'primary', label: 'Primary' },
|
188
|
+
{ value: 'secondary', label: 'Secondary' },
|
189
|
+
{ value: 'tertiary', label: 'Tertiary' },
|
190
|
+
{ value: 'theme', label: 'Theme' },
|
191
|
+
{ value: 'theme-contrast', label: 'Theme Contrast' },
|
192
|
+
{ value: 'black', label: 'Black' },
|
193
|
+
{ value: 'white', label: 'White' },
|
194
|
+
];
|
195
|
+
}
|
110
196
|
}
|
111
197
|
RaisedCardComponent.decorators = [
|
112
198
|
{ type: Component, args: [{
|
113
199
|
// eslint-disable-next-line @angular-eslint/component-selector
|
114
200
|
selector: 'raised-card',
|
115
|
-
template: "<daff-card [
|
201
|
+
template: "<daff-raised-card [color]=\"colorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-raised-card>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
116
202
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
117
|
-
styles: ["
|
203
|
+
styles: ["daff-raised-card{max-width:480px}"]
|
118
204
|
},] }
|
119
205
|
];
|
120
206
|
|
@@ -127,7 +213,7 @@ RaisedCardModule.decorators = [
|
|
127
213
|
],
|
128
214
|
imports: [
|
129
215
|
CommonModule,
|
130
|
-
|
216
|
+
ReactiveFormsModule,
|
131
217
|
DaffCardModule,
|
132
218
|
DaffImageModule,
|
133
219
|
DaffButtonModule,
|
@@ -138,16 +224,64 @@ RaisedCardModule.decorators = [
|
|
138
224
|
},] }
|
139
225
|
];
|
140
226
|
|
227
|
+
class StrokedCardComponent {
|
228
|
+
constructor() {
|
229
|
+
this.colorControl = new FormControl('');
|
230
|
+
this.options = [
|
231
|
+
{ value: '', label: 'Default' },
|
232
|
+
{ value: 'primary', label: 'Primary' },
|
233
|
+
{ value: 'secondary', label: 'Secondary' },
|
234
|
+
{ value: 'tertiary', label: 'Tertiary' },
|
235
|
+
{ value: 'theme', label: 'Theme' },
|
236
|
+
{ value: 'theme-contrast', label: 'Theme Contrast' },
|
237
|
+
{ value: 'black', label: 'Black' },
|
238
|
+
{ value: 'white', label: 'White' },
|
239
|
+
];
|
240
|
+
}
|
241
|
+
}
|
242
|
+
StrokedCardComponent.decorators = [
|
243
|
+
{ type: Component, args: [{
|
244
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
245
|
+
selector: 'stroked-card',
|
246
|
+
template: "<daff-stroked-card [color]=\"colorControl.value\">\n\t<daff-image daffCardImage\n\t\tsrc=\"https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80\"\n\t\talt=\"Bottom up view of Basel exhibition centre\"\n\t\twidth=\"1261\"\n\t\theight=\"946\">\n\t</daff-image>\n\t<div daffCardTagline>Basel, Switzerland</div>\n\t<h4 daffCardTitle>Basel Exhibition Centre</h4>\n\t<div daffCardContent>\n\t\t<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the \"Fenster zum Himmel\" (\"window to heaven\").</p>\n\t</div>\n</daff-stroked-card>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
247
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
248
|
+
styles: [":host{display:block;max-width:340px}"]
|
249
|
+
},] }
|
250
|
+
];
|
251
|
+
|
252
|
+
class StrokedCardModule {
|
253
|
+
}
|
254
|
+
StrokedCardModule.decorators = [
|
255
|
+
{ type: NgModule, args: [{
|
256
|
+
declarations: [
|
257
|
+
StrokedCardComponent,
|
258
|
+
],
|
259
|
+
imports: [
|
260
|
+
CommonModule,
|
261
|
+
RouterModule,
|
262
|
+
ReactiveFormsModule,
|
263
|
+
DaffCardModule,
|
264
|
+
DaffImageModule,
|
265
|
+
DaffButtonModule,
|
266
|
+
],
|
267
|
+
exports: [
|
268
|
+
StrokedCardComponent,
|
269
|
+
],
|
270
|
+
},] }
|
271
|
+
];
|
272
|
+
|
141
273
|
const CARD_EXAMPLES = [
|
142
274
|
BasicCardComponent,
|
143
275
|
CardThemingComponent,
|
144
276
|
LinkableCardComponent,
|
145
277
|
RaisedCardComponent,
|
278
|
+
StrokedCardComponent,
|
279
|
+
CardOrientationComponent,
|
146
280
|
];
|
147
281
|
|
148
282
|
/**
|
149
283
|
* Generated bundle index. Do not edit.
|
150
284
|
*/
|
151
285
|
|
152
|
-
export { BasicCardModule, CARD_EXAMPLES, CardThemingModule, LinkableCardModule, RaisedCardModule, BasicCardComponent as ɵa, CardThemingComponent as ɵb, LinkableCardComponent as ɵc, RaisedCardComponent as ɵd };
|
286
|
+
export { BasicCardModule, CARD_EXAMPLES, CardOrientationModule, CardThemingModule, LinkableCardModule, RaisedCardModule, StrokedCardModule, BasicCardComponent as ɵa, CardThemingComponent as ɵb, LinkableCardComponent as ɵc, RaisedCardComponent as ɵd, StrokedCardComponent as ɵe, CardOrientationComponent as ɵf };
|
153
287
|
//# sourceMappingURL=daffodil-design-card-examples.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"daffodil-design-card-examples.js","sources":["../../../libs/design/card/examples/src/basic-card/basic-card.component.ts","../../../libs/design/card/examples/src/basic-card/basic-card.module.ts","../../../libs/design/card/examples/src/card-theming/card-theming.component.ts","../../../libs/design/card/examples/src/card-theming/card-theming.module.ts","../../../libs/design/card/examples/src/linkable-card/linkable-card.component.ts","../../../libs/design/card/examples/src/linkable-card/linkable-card.module.ts","../../../libs/design/card/examples/src/raised-card/raised-card.component.ts","../../../libs/design/card/examples/src/raised-card/raised-card.module.ts","../../../libs/design/card/examples/src/public_api.ts","../../../libs/design/card/examples/src/daffodil-design-card-examples.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'basic-card',\n templateUrl: './basic-card.component.html',\n styleUrls: ['./basic-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BasicCardComponent {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { BasicCardComponent } from './basic-card.component';\n\n@NgModule({\n declarations: [\n BasicCardComponent,\n ],\n imports: [\n CommonModule,\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n ],\n exports: [\n BasicCardComponent,\n ],\n})\nexport class BasicCardModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\nimport { DaffPalette } from '@daffodil/design';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'card-theming',\n templateUrl: './card-theming.component.html',\n styles: [`\n daff-card {\n max-width: 400px;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardThemingComponent {\n color: DaffPalette = 'primary';\n\n colorControl: FormControl = new FormControl('');\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n} from '@daffodil/design';\n\nimport { CardThemingComponent } from './card-theming.component';\n\n@NgModule({\n declarations: [\n CardThemingComponent,\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n DaffCardModule,\n DaffImageModule,\n ],\n exports: [\n CardThemingComponent,\n ],\n})\nexport class CardThemingModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'linkable-card',\n templateUrl: './linkable-card.component.html',\n styleUrls: ['./linkable-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LinkableCardComponent {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { LinkableCardComponent } from './linkable-card.component';\n\n@NgModule({\n declarations: [\n LinkableCardComponent,\n ],\n imports: [\n CommonModule,\n RouterModule,\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n ],\n exports: [\n LinkableCardComponent,\n ],\n})\nexport class LinkableCardModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'raised-card',\n templateUrl: './raised-card.component.html',\n styleUrls: ['./raised-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RaisedCardComponent {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { RaisedCardComponent } from './raised-card.component';\n\n@NgModule({\n declarations: [\n RaisedCardComponent,\n ],\n imports: [\n CommonModule,\n RouterModule,\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n ],\n exports: [\n RaisedCardComponent,\n ],\n})\nexport class RaisedCardModule { }\n","import { BasicCardComponent } from './basic-card/basic-card.component';\nexport { BasicCardModule } from './basic-card/basic-card.module';\nimport { CardThemingComponent } from './card-theming/card-theming.component';\nexport { CardThemingModule } from './card-theming/card-theming.module';\nimport { LinkableCardComponent } from './linkable-card/linkable-card.component';\nexport { LinkableCardModule } from './linkable-card/linkable-card.module';\nimport { RaisedCardComponent } from './raised-card/raised-card.component';\nexport { RaisedCardModule } from './raised-card/raised-card.module';\n\nexport const CARD_EXAMPLES = [\n BasicCardComponent,\n CardThemingComponent,\n LinkableCardComponent,\n RaisedCardComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {BasicCardComponent as ɵa} from './basic-card/basic-card.component';\nexport {CardThemingComponent as ɵb} from './card-theming/card-theming.component';\nexport {LinkableCardComponent as ɵc} from './linkable-card/linkable-card.component';\nexport {RaisedCardComponent as ɵd} from './raised-card/raised-card.component';"],"names":[],"mappings":";;;;;;MAYa,kBAAkB;;;YAP9B,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,gdAA0C;gBAE1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCcY,eAAe;;;YAd3B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,kBAAkB;iBACnB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,cAAc;oBACd,eAAe;oBACf,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,kBAAkB;iBACnB;aACF;;;MCLY,oBAAoB;IAXjC;QAYE,UAAK,GAAgB,SAAS,CAAC;QAE/B,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;KACjD;;;YAfA,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,slBAA4C;gBAM5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;yBALtC;;;;GAIR;aAEF;;;MCOY,iBAAiB;;;YAd7B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;iBACrB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,cAAc;oBACd,eAAe;iBAChB;gBACD,OAAO,EAAE;oBACP,oBAAoB;iBACrB;aACF;;;MCZY,qBAAqB;;;YAPjC,SAAS,SAAC;;gBAET,QAAQ,EAAE,eAAe;gBACzB,0TAA6C;gBAE7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCgBY,kBAAkB;;;YAf9B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,qBAAqB;iBACtB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,YAAY;oBACZ,cAAc;oBACd,eAAe;oBACf,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,qBAAqB;iBACtB;aACF;;;MCdY,mBAAmB;;;YAP/B,SAAS,SAAC;;gBAET,QAAQ,EAAE,aAAa;gBACvB,oUAA2C;gBAE3C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCgBY,gBAAgB;;;YAf5B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,mBAAmB;iBACpB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,YAAY;oBACZ,cAAc;oBACd,eAAe;oBACf,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,mBAAmB;iBACpB;aACF;;;MCjBY,aAAa,GAAG;IAC3B,kBAAkB;IAClB,oBAAoB;IACpB,qBAAqB;IACrB,mBAAmB;;;ACbrB;;;;;;"}
|
1
|
+
{"version":3,"file":"daffodil-design-card-examples.js","sources":["../../../libs/design/card/examples/src/basic-card/basic-card.component.ts","../../../libs/design/card/examples/src/basic-card/basic-card.module.ts","../../../libs/design/card/examples/src/card-orientation/card-orientation.component.ts","../../../libs/design/card/examples/src/card-orientation/card-orientation.module.ts","../../../libs/design/card/examples/src/card-theming/card-theming.component.ts","../../../libs/design/card/examples/src/card-theming/card-theming.module.ts","../../../libs/design/card/examples/src/linkable-card/linkable-card.component.ts","../../../libs/design/card/examples/src/linkable-card/linkable-card.module.ts","../../../libs/design/card/examples/src/raised-card/raised-card.component.ts","../../../libs/design/card/examples/src/raised-card/raised-card.module.ts","../../../libs/design/card/examples/src/stroked-card/stroked-card.component.ts","../../../libs/design/card/examples/src/stroked-card/stroked-card.module.ts","../../../libs/design/card/examples/src/public_api.ts","../../../libs/design/card/examples/src/daffodil-design-card-examples.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { faMapMarked } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'basic-card',\n templateUrl: './basic-card.component.html',\n styleUrls: ['./basic-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BasicCardComponent {\n faMapMarked = faMapMarked;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { BasicCardComponent } from './basic-card.component';\n\n@NgModule({\n declarations: [\n BasicCardComponent,\n ],\n imports: [\n CommonModule,\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n\n FontAwesomeModule,\n ],\n exports: [\n BasicCardComponent,\n ],\n})\nexport class BasicCardModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { faMapMarked } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'card-orientation',\n templateUrl: './card-orientation.component.html',\n styleUrls: ['./card-orientation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardOrientationComponent {\n faMapMarked = faMapMarked;\n\n orientationControl: FormControl = new FormControl('');\n\n options = [\n { value: '', label: 'Default' },\n { value: 'vertical', label: 'Vertical' },\n { value: 'horizontal', label: 'Horizontal' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport {\n DaffButtonModule,\n DaffCardModule,\n DaffImageModule,\n} from '@daffodil/design';\n\nimport { CardOrientationComponent } from './card-orientation.component';\n\n@NgModule({\n declarations: [\n CardOrientationComponent,\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n FontAwesomeModule,\n ],\n exports: [\n CardOrientationComponent,\n ],\n})\nexport class CardOrientationModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'card-theming',\n templateUrl: './card-theming.component.html',\n styles: [`\n daff-card {\n max-width: 480px;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardThemingComponent {\n colorControl: FormControl = new FormControl('');\n\n options = [\n { value: '', label: 'Default' },\n { value: 'primary', label: 'Primary' },\n { value: 'secondary', label: 'Secondary' },\n { value: 'tertiary', label: 'Tertiary' },\n { value: 'theme', label: 'Theme' },\n { value: 'theme-contrast', label: 'Theme Contrast' },\n { value: 'black', label: 'Black' },\n { value: 'white', label: 'White' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n} from '@daffodil/design';\n\nimport { CardThemingComponent } from './card-theming.component';\n\n@NgModule({\n declarations: [\n CardThemingComponent,\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n DaffCardModule,\n DaffImageModule,\n ],\n exports: [\n CardThemingComponent,\n ],\n})\nexport class CardThemingModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'linkable-card',\n templateUrl: './linkable-card.component.html',\n styleUrls: ['./linkable-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LinkableCardComponent {\n basicColorControl: FormControl = new FormControl('');\n raisedColorControl: FormControl = new FormControl('');\n strokedColorControl: FormControl = new FormControl('');\n\n options = [\n { value: '', label: 'Default' },\n { value: 'primary', label: 'Primary' },\n { value: 'secondary', label: 'Secondary' },\n { value: 'tertiary', label: 'Tertiary' },\n { value: 'theme', label: 'Theme' },\n { value: 'theme-contrast', label: 'Theme Contrast' },\n { value: 'black', label: 'Black' },\n { value: 'white', label: 'White' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { LinkableCardComponent } from './linkable-card.component';\n\n@NgModule({\n declarations: [\n LinkableCardComponent,\n ],\n imports: [\n CommonModule,\n RouterModule,\n ReactiveFormsModule,\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n ],\n exports: [\n LinkableCardComponent,\n ],\n})\nexport class LinkableCardModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'raised-card',\n templateUrl: './raised-card.component.html',\n styleUrls: ['./raised-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RaisedCardComponent {\n colorControl: FormControl = new FormControl('');\n\n options = [\n { value: '', label: 'Default' },\n { value: 'primary', label: 'Primary' },\n { value: 'secondary', label: 'Secondary' },\n { value: 'tertiary', label: 'Tertiary' },\n { value: 'theme', label: 'Theme' },\n { value: 'theme-contrast', label: 'Theme Contrast' },\n { value: 'black', label: 'Black' },\n { value: 'white', label: 'White' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { RaisedCardComponent } from './raised-card.component';\n\n@NgModule({\n declarations: [\n RaisedCardComponent,\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n ],\n exports: [\n RaisedCardComponent,\n ],\n})\nexport class RaisedCardModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'stroked-card',\n templateUrl: './stroked-card.component.html',\n styleUrls: ['./stroked-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StrokedCardComponent {\n colorControl: FormControl = new FormControl('');\n\n options = [\n { value: '', label: 'Default' },\n { value: 'primary', label: 'Primary' },\n { value: 'secondary', label: 'Secondary' },\n { value: 'tertiary', label: 'Tertiary' },\n { value: 'theme', label: 'Theme' },\n { value: 'theme-contrast', label: 'Theme Contrast' },\n { value: 'black', label: 'Black' },\n { value: 'white', label: 'White' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\n\nimport {\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n} from '@daffodil/design';\n\nimport { StrokedCardComponent } from './stroked-card.component';\n\n@NgModule({\n declarations: [\n StrokedCardComponent,\n ],\n imports: [\n CommonModule,\n RouterModule,\n ReactiveFormsModule,\n\n DaffCardModule,\n DaffImageModule,\n DaffButtonModule,\n ],\n exports: [\n StrokedCardComponent,\n ],\n})\nexport class StrokedCardModule { }\n","import { BasicCardComponent } from './basic-card/basic-card.component';\nexport { BasicCardModule } from './basic-card/basic-card.module';\nimport { CardOrientationComponent } from './card-orientation/card-orientation.component';\nexport { CardOrientationModule } from './card-orientation/card-orientation.module';\nimport { CardThemingComponent } from './card-theming/card-theming.component';\nexport { CardThemingModule } from './card-theming/card-theming.module';\nimport { LinkableCardComponent } from './linkable-card/linkable-card.component';\nexport { LinkableCardModule } from './linkable-card/linkable-card.module';\nimport { RaisedCardComponent } from './raised-card/raised-card.component';\nexport { RaisedCardModule } from './raised-card/raised-card.module';\nimport { StrokedCardComponent } from './stroked-card/stroked-card.component';\nexport { StrokedCardModule } from './stroked-card/stroked-card.module';\n\nexport const CARD_EXAMPLES = [\n BasicCardComponent,\n CardThemingComponent,\n LinkableCardComponent,\n RaisedCardComponent,\n StrokedCardComponent,\n CardOrientationComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {BasicCardComponent as ɵa} from './basic-card/basic-card.component';\nexport {CardOrientationComponent as ɵf} from './card-orientation/card-orientation.component';\nexport {CardThemingComponent as ɵb} from './card-theming/card-theming.component';\nexport {LinkableCardComponent as ɵc} from './linkable-card/linkable-card.component';\nexport {RaisedCardComponent as ɵd} from './raised-card/raised-card.component';\nexport {StrokedCardComponent as ɵe} from './stroked-card/stroked-card.component';"],"names":[],"mappings":";;;;;;;;MAaa,kBAAkB;IAP/B;QAQE,gBAAW,GAAG,WAAW,CAAC;KAC3B;;;YATA,SAAS,SAAC;;gBAET,QAAQ,EAAE,YAAY;gBACtB,u5BAA0C;gBAE1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCgBY,eAAe;;;YAhB3B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,kBAAkB;iBACnB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,cAAc;oBACd,eAAe;oBACf,gBAAgB;oBAEhB,iBAAiB;iBAClB;gBACD,OAAO,EAAE;oBACP,kBAAkB;iBACnB;aACF;;;MCbY,wBAAwB;IAPrC;QAQE,gBAAW,GAAG,WAAW,CAAC;QAE1B,uBAAkB,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEtD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;SAC7C,CAAC;KACH;;;YAjBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,kBAAkB;gBAC5B,ilCAAgD;gBAEhD,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCgBY,qBAAqB;;;YAhBjC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,wBAAwB;iBACzB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,cAAc;oBACd,eAAe;oBACf,gBAAgB;oBAChB,iBAAiB;iBAClB;gBACD,OAAO,EAAE;oBACP,wBAAwB;iBACzB;aACF;;;MCXY,oBAAoB;IAXjC;QAYE,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEhD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;YACpD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC,CAAC;KACH;;;YAxBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,2WAA4C;gBAM5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;yBALtC;;;;GAIR;aAEF;;;MCSY,iBAAiB;;;YAd7B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;iBACrB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,cAAc;oBACd,eAAe;iBAChB;gBACD,OAAO,EAAE;oBACP,oBAAoB;iBACrB;aACF;;;MCXY,qBAAqB;IAPlC;QAQE,sBAAiB,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QACrD,uBAAkB,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QACtD,wBAAmB,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEvD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;YACpD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC,CAAC;KACH;;;YAtBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,eAAe;gBACzB,4gGAA6C;gBAE7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCiBY,kBAAkB;;;YAhB9B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,qBAAqB;iBACtB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,YAAY;oBACZ,mBAAmB;oBACnB,cAAc;oBACd,eAAe;oBACf,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,qBAAqB;iBACtB;aACF;;;MCfY,mBAAmB;IAPhC;QAQE,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEhD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;YACpD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC,CAAC;KACH;;;YApBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,aAAa;gBACvB,y6BAA2C;gBAE3C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCgBY,gBAAgB;;;YAhB5B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,mBAAmB;iBACpB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBAEnB,cAAc;oBACd,eAAe;oBACf,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,mBAAmB;iBACpB;aACF;;;MCdY,oBAAoB;IAPjC;QAQE,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEhD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;YACpD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC,CAAC;KACH;;;YApBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,26BAA4C;gBAE5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCkBY,iBAAiB;;;YAjB7B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;iBACrB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,YAAY;oBACZ,mBAAmB;oBAEnB,cAAc;oBACd,eAAe;oBACf,gBAAgB;iBACjB;gBACD,OAAO,EAAE;oBACP,oBAAoB;iBACrB;aACF;;;MChBY,aAAa,GAAG;IAC3B,kBAAkB;IAClB,oBAAoB;IACpB,qBAAqB;IACrB,mBAAmB;IACnB,oBAAoB;IACpB,wBAAwB;;;ACnB1B;;;;;;"}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
2
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
3
|
+
import { CommonModule } from '@angular/common';
|
4
|
+
import { DaffContainerModule } from '@daffodil/design';
|
5
|
+
|
6
|
+
class ContainerSizesComponent {
|
7
|
+
constructor() {
|
8
|
+
this.sizeControl = new FormControl('xs');
|
9
|
+
this.options = [
|
10
|
+
{ value: 'xs', label: 'Extra Small' },
|
11
|
+
{ value: 'sm', label: 'Small' },
|
12
|
+
{ value: 'md', label: 'Medium' },
|
13
|
+
{ value: 'lg', label: 'Large' },
|
14
|
+
{ value: 'xl', label: 'Extra Large' },
|
15
|
+
];
|
16
|
+
}
|
17
|
+
}
|
18
|
+
ContainerSizesComponent.decorators = [
|
19
|
+
{ type: Component, args: [{
|
20
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
21
|
+
selector: 'container-sizes',
|
22
|
+
template: "<daff-container [size]=\"sizeControl.value\">\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in egestas ex, sed scelerisque neque. In ut vestibulum dui. Donec aliquet tortor pellentesque ex tincidunt faucibus. Vestibulum scelerisque dolor sit amet enim facilisis mattis. Pellentesque scelerisque vitae sapien sit amet dignissim. Aenean gravida facilisis ligula id vestibulum. Etiam viverra massa et nibh auctor molestie. Vestibulum rutrum pretium ex, vitae tempus mi. Nunc non arcu id ligula feugiat venenatis eu id urna. Vivamus fringilla, sapien ut molestie eleifend, ex arcu fringilla sapien, nec eleifend erat justo scelerisque metus. Integer eleifend, felis eget ultrices iaculis, sapien nibh pharetra enim, non malesuada mauris orci sed diam. Curabitur ultricies, enim in porta blandit, justo urna porta lacus, eu aliquet lectus est nec quam. Morbi condimentum auctor nisl, id convallis purus blandit laoreet. Nunc quis nulla mattis tellus feugiat laoreet. Curabitur in efficitur nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n</daff-container>\n\n<select [formControl]=\"sizeControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
23
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
24
|
+
},] }
|
25
|
+
];
|
26
|
+
|
27
|
+
class ContainerSizesModule {
|
28
|
+
}
|
29
|
+
ContainerSizesModule.decorators = [
|
30
|
+
{ type: NgModule, args: [{
|
31
|
+
declarations: [
|
32
|
+
ContainerSizesComponent,
|
33
|
+
],
|
34
|
+
exports: [
|
35
|
+
ContainerSizesComponent,
|
36
|
+
],
|
37
|
+
imports: [
|
38
|
+
CommonModule,
|
39
|
+
ReactiveFormsModule,
|
40
|
+
DaffContainerModule,
|
41
|
+
],
|
42
|
+
},] }
|
43
|
+
];
|
44
|
+
|
45
|
+
const CONTAINER_EXAMPLES = [
|
46
|
+
ContainerSizesComponent,
|
47
|
+
];
|
48
|
+
|
49
|
+
/**
|
50
|
+
* Generated bundle index. Do not edit.
|
51
|
+
*/
|
52
|
+
|
53
|
+
export { CONTAINER_EXAMPLES, ContainerSizesComponent, ContainerSizesModule };
|
54
|
+
//# sourceMappingURL=daffodil-design-container-examples.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"daffodil-design-container-examples.js","sources":["../../../libs/design/container/examples/src/container-sizes/container-sizes.component.ts","../../../libs/design/container/examples/src/container-sizes/container-sizes.module.ts","../../../libs/design/container/examples/src/examples.ts","../../../libs/design/container/examples/src/daffodil-design-container-examples.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'container-sizes',\n templateUrl: './container-sizes.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ContainerSizesComponent {\n sizeControl: FormControl = new FormControl('xs');\n\n options = [\n { value: 'xs', label: 'Extra Small' },\n { value: 'sm', label: 'Small' },\n { value: 'md', label: 'Medium' },\n { value: 'lg', label: 'Large' },\n { value: 'xl', label: 'Extra Large' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { DaffContainerModule } from '@daffodil/design';\n\nimport { ContainerSizesComponent } from './container-sizes.component';\n\n\n@NgModule({\n declarations: [\n ContainerSizesComponent,\n ],\n exports: [\n ContainerSizesComponent,\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n\n DaffContainerModule,\n ],\n})\nexport class ContainerSizesModule { }\n","import { ContainerSizesComponent } from './container-sizes/container-sizes.component';\n\nexport const CONTAINER_EXAMPLES = [\n ContainerSizesComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAYa,uBAAuB;IANpC;QAOE,gBAAW,GAAgB,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC;QAEjD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;YACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;YAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;YAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;YAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;SACtC,CAAC;KACH;;;YAhBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;gBAC3B,mwCAA+C;gBAC/C,eAAe,EAAE,uBAAuB,CAAC,MAAM;aAChD;;;MCYY,oBAAoB;;;YAdhC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,uBAAuB;iBACxB;gBACD,OAAO,EAAE;oBACP,uBAAuB;iBACxB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBAEnB,mBAAmB;iBACpB;aACF;;;MCpBY,kBAAkB,GAAG;IAChC,uBAAuB;;;ACHzB;;;;;;"}
|
@@ -0,0 +1,142 @@
|
|
1
|
+
import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
2
|
+
import { CommonModule } from '@angular/common';
|
3
|
+
import { DaffNavbarModule, DaffButtonModule, DaffContainerModule } from '@daffodil/design';
|
4
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
5
|
+
|
6
|
+
class BasicNavbarComponent {
|
7
|
+
}
|
8
|
+
BasicNavbarComponent.decorators = [
|
9
|
+
{ type: Component, args: [{
|
10
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
11
|
+
selector: 'basic-navbar',
|
12
|
+
template: "<nav daff-navbar class=\"daff-basic-navbar\">\n\t<div class=\"daff-basic-navbar__links\">\n\t\t<a href=\"/\">Home</a>\n\t\t<a href=\"/\">About Us</a>\n\t</div>\n\t<button daff-button color=\"theme-contrast\">Contact Us</button>\n</nav>",
|
13
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
14
|
+
styles: [".daff-basic-navbar{justify-content:space-between}.daff-basic-navbar__links>*{font-weight:700;font-size:1.125rem;padding:0 16px;text-decoration:none;text-transform:uppercase}"]
|
15
|
+
},] }
|
16
|
+
];
|
17
|
+
|
18
|
+
class BasicNavbarModule {
|
19
|
+
}
|
20
|
+
BasicNavbarModule.decorators = [
|
21
|
+
{ type: NgModule, args: [{
|
22
|
+
declarations: [
|
23
|
+
BasicNavbarComponent,
|
24
|
+
],
|
25
|
+
imports: [
|
26
|
+
CommonModule,
|
27
|
+
DaffNavbarModule,
|
28
|
+
DaffButtonModule,
|
29
|
+
DaffContainerModule,
|
30
|
+
],
|
31
|
+
},] }
|
32
|
+
];
|
33
|
+
|
34
|
+
class ContainedNavbarComponent {
|
35
|
+
}
|
36
|
+
ContainedNavbarComponent.decorators = [
|
37
|
+
{ type: Component, args: [{
|
38
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
39
|
+
selector: 'contained-navbar',
|
40
|
+
template: "<nav daff-navbar class=\"daff-contained-navbar\">\n\t<daff-container size=\"md\">\n\t\t<div class=\"daff-contained-navbar__links\">\n\t\t\t<a href=\"/\">Home</a>\n\t\t\t<a href=\"/\">About Us</a>\n\t\t</div>\n\t\t<button daff-button>Contact Us</button>\n\t</daff-container>\n</nav>\n",
|
41
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
42
|
+
styles: [".daff-contained-navbar{justify-content:space-between}.daff-contained-navbar__links>*{font-weight:700;font-size:1.125rem;padding:0 16px;text-decoration:none;text-transform:uppercase}"]
|
43
|
+
},] }
|
44
|
+
];
|
45
|
+
|
46
|
+
class ContainedNavbarModule {
|
47
|
+
}
|
48
|
+
ContainedNavbarModule.decorators = [
|
49
|
+
{ type: NgModule, args: [{
|
50
|
+
declarations: [
|
51
|
+
ContainedNavbarComponent,
|
52
|
+
],
|
53
|
+
imports: [
|
54
|
+
CommonModule,
|
55
|
+
DaffNavbarModule,
|
56
|
+
DaffButtonModule,
|
57
|
+
DaffContainerModule,
|
58
|
+
],
|
59
|
+
},] }
|
60
|
+
];
|
61
|
+
|
62
|
+
class NavbarThemingComponent {
|
63
|
+
constructor() {
|
64
|
+
this.colorControl = new FormControl('');
|
65
|
+
this.options = [
|
66
|
+
{ value: '', label: 'Default' },
|
67
|
+
{ value: 'primary', label: 'Primary' },
|
68
|
+
{ value: 'secondary', label: 'Secondary' },
|
69
|
+
{ value: 'tertiary', label: 'Tertiary' },
|
70
|
+
{ value: 'white', label: 'White' },
|
71
|
+
{ value: 'black', label: 'Black' },
|
72
|
+
{ value: 'theme', label: 'Theme' },
|
73
|
+
{ value: 'theme-contrast', label: 'Theme Contrast' },
|
74
|
+
];
|
75
|
+
}
|
76
|
+
}
|
77
|
+
NavbarThemingComponent.decorators = [
|
78
|
+
{ type: Component, args: [{
|
79
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
80
|
+
selector: 'navbar-theming',
|
81
|
+
template: "<nav daff-navbar [color]=\"colorControl.value\" class=\"daff-navbar-theming\">\n\t<div class=\"daff-navbar-theming__links\">\n\t\t<a href=\"/\">Home</a>\n\t\t<a href=\"/\">About Us</a>\n\t</div>\n\t<button daff-button>Contact Us</button>\n</nav>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>",
|
82
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
83
|
+
styles: [".daff-navbar-theming{justify-content:space-between}.daff-navbar-theming__links>*{font-weight:700;font-size:1.125rem;padding:0 16px;text-decoration:none;text-transform:uppercase}"]
|
84
|
+
},] }
|
85
|
+
];
|
86
|
+
|
87
|
+
class NavbarThemingModule {
|
88
|
+
}
|
89
|
+
NavbarThemingModule.decorators = [
|
90
|
+
{ type: NgModule, args: [{
|
91
|
+
declarations: [
|
92
|
+
NavbarThemingComponent,
|
93
|
+
],
|
94
|
+
imports: [
|
95
|
+
CommonModule,
|
96
|
+
ReactiveFormsModule,
|
97
|
+
DaffNavbarModule,
|
98
|
+
DaffButtonModule,
|
99
|
+
],
|
100
|
+
},] }
|
101
|
+
];
|
102
|
+
|
103
|
+
class RaisedNavbarComponent {
|
104
|
+
}
|
105
|
+
RaisedNavbarComponent.decorators = [
|
106
|
+
{ type: Component, args: [{
|
107
|
+
// eslint-disable-next-line @angular-eslint/component-selector
|
108
|
+
selector: 'raised-navbar',
|
109
|
+
template: "<nav daff-navbar [raised]=\"true\" class=\"daff-raised-navbar\">\n\t<div class=\"daff-raised-navbar__links\">\n\t\t<a href=\"/\">Home</a>\n\t\t<a href=\"/\">About Us</a>\n\t</div>\n\t<button daff-button>Contact Us</button>\n</nav>\n",
|
110
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
111
|
+
styles: [".daff-raised-navbar{justify-content:space-between}.daff-raised-navbar__links>*{font-weight:700;font-size:1.125rem;padding:0 16px;text-decoration:none;text-transform:uppercase}"]
|
112
|
+
},] }
|
113
|
+
];
|
114
|
+
|
115
|
+
class RaisedNavbarModule {
|
116
|
+
}
|
117
|
+
RaisedNavbarModule.decorators = [
|
118
|
+
{ type: NgModule, args: [{
|
119
|
+
declarations: [
|
120
|
+
RaisedNavbarComponent,
|
121
|
+
],
|
122
|
+
imports: [
|
123
|
+
CommonModule,
|
124
|
+
DaffNavbarModule,
|
125
|
+
DaffButtonModule,
|
126
|
+
],
|
127
|
+
},] }
|
128
|
+
];
|
129
|
+
|
130
|
+
const NAVBAR_EXAMPLES = [
|
131
|
+
BasicNavbarComponent,
|
132
|
+
ContainedNavbarComponent,
|
133
|
+
NavbarThemingComponent,
|
134
|
+
RaisedNavbarComponent,
|
135
|
+
];
|
136
|
+
|
137
|
+
/**
|
138
|
+
* Generated bundle index. Do not edit.
|
139
|
+
*/
|
140
|
+
|
141
|
+
export { BasicNavbarComponent, BasicNavbarModule, ContainedNavbarComponent, ContainedNavbarModule, NAVBAR_EXAMPLES, NavbarThemingComponent, NavbarThemingModule, RaisedNavbarComponent, RaisedNavbarModule };
|
142
|
+
//# sourceMappingURL=daffodil-design-navbar-examples.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"daffodil-design-navbar-examples.js","sources":["../../../libs/design/navbar/examples/src/basic-navbar/basic-navbar.component.ts","../../../libs/design/navbar/examples/src/basic-navbar/basic-navbar.module.ts","../../../libs/design/navbar/examples/src/contained-navbar/contained-navbar.component.ts","../../../libs/design/navbar/examples/src/contained-navbar/contained-navbar.module.ts","../../../libs/design/navbar/examples/src/navbar-theming/navbar-theming.component.ts","../../../libs/design/navbar/examples/src/navbar-theming/navbar-theming.module.ts","../../../libs/design/navbar/examples/src/raised-navbar/raised-navbar.component.ts","../../../libs/design/navbar/examples/src/raised-navbar/raised-navbar.module.ts","../../../libs/design/navbar/examples/src/examples.ts","../../../libs/design/navbar/examples/src/daffodil-design-navbar-examples.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'basic-navbar',\n templateUrl: './basic-navbar.component.html',\n styleUrls: ['./basic-navbar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BasicNavbarComponent {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n DaffButtonModule,\n DaffContainerModule,\n DaffNavbarModule,\n} from '@daffodil/design';\n\nimport { BasicNavbarComponent } from './basic-navbar.component';\n\n@NgModule({\n declarations: [\n BasicNavbarComponent,\n ],\n imports: [\n CommonModule,\n\n DaffNavbarModule,\n DaffButtonModule,\n DaffContainerModule,\n ],\n})\nexport class BasicNavbarModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'contained-navbar',\n templateUrl: './contained-navbar.component.html',\n styleUrls: ['./contained-navbar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ContainedNavbarComponent {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n DaffButtonModule,\n DaffContainerModule,\n DaffNavbarModule,\n} from '@daffodil/design';\n\nimport { ContainedNavbarComponent } from './contained-navbar.component';\n\n@NgModule({\n declarations: [\n ContainedNavbarComponent,\n ],\n imports: [\n CommonModule,\n\n DaffNavbarModule,\n DaffButtonModule,\n DaffContainerModule,\n ],\n})\nexport class ContainedNavbarModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'navbar-theming',\n templateUrl: './navbar-theming.component.html',\n styleUrls: ['./navbar-theming.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NavbarThemingComponent {\n colorControl: FormControl = new FormControl('');\n\n options = [\n { value: '', label: 'Default' },\n { value: 'primary', label: 'Primary' },\n { value: 'secondary', label: 'Secondary' },\n { value: 'tertiary', label: 'Tertiary' },\n { value: 'white', label: 'White' },\n { value: 'black', label: 'Black' },\n { value: 'theme', label: 'Theme' },\n { value: 'theme-contrast', label: 'Theme Contrast' },\n ];\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport {\n DaffButtonModule,\n DaffNavbarModule,\n} from '@daffodil/design';\n\nimport { NavbarThemingComponent } from './navbar-theming.component';\n\n@NgModule({\n declarations: [\n NavbarThemingComponent,\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n DaffNavbarModule,\n DaffButtonModule,\n ],\n})\nexport class NavbarThemingModule { }\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'raised-navbar',\n templateUrl: './raised-navbar.component.html',\n styleUrls: ['./raised-navbar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RaisedNavbarComponent {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n DaffButtonModule,\n DaffNavbarModule,\n} from '@daffodil/design';\n\nimport { RaisedNavbarComponent } from './raised-navbar.component';\n\n@NgModule({\n declarations: [\n RaisedNavbarComponent,\n ],\n imports: [\n CommonModule,\n\n DaffNavbarModule,\n DaffButtonModule,\n ],\n})\nexport class RaisedNavbarModule { }\n","import { BasicNavbarComponent } from './basic-navbar/basic-navbar.component';\nimport { ContainedNavbarComponent } from './contained-navbar/contained-navbar.component';\nimport { NavbarThemingComponent } from './navbar-theming/navbar-theming.component';\nimport { RaisedNavbarComponent } from './raised-navbar/raised-navbar.component';\n\nexport const NAVBAR_EXAMPLES = [\n BasicNavbarComponent,\n ContainedNavbarComponent,\n NavbarThemingComponent,\n RaisedNavbarComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAaa,oBAAoB;;;YAPhC,SAAS,SAAC;;gBAET,QAAQ,EAAE,cAAc;gBACxB,uPAA4C;gBAE5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCWY,iBAAiB;;;YAZ7B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;iBACrB;gBACD,OAAO,EAAE;oBACP,YAAY;oBAEZ,gBAAgB;oBAChB,gBAAgB;oBAChB,mBAAmB;iBACpB;aACF;;;MCVY,wBAAwB;;;YAPpC,SAAS,SAAC;;gBAET,QAAQ,EAAE,kBAAkB;gBAC5B,uSAAgD;gBAEhD,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCYY,qBAAqB;;;YAZjC,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,wBAAwB;iBACzB;gBACD,OAAO,EAAE;oBACP,YAAY;oBAEZ,gBAAgB;oBAChB,gBAAgB;oBAChB,mBAAmB;iBACpB;aACF;;;MCTY,sBAAsB;IAPnC;QAQE,iBAAY,GAAgB,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEhD,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE;SACrD,CAAC;KACH;;;YApBA,SAAS,SAAC;;gBAET,QAAQ,EAAE,gBAAgB;gBAC1B,wZAA8C;gBAE9C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCUY,mBAAmB;;;YAX/B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,sBAAsB;iBACvB;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,mBAAmB;oBACnB,gBAAgB;oBAChB,gBAAgB;iBACjB;aACF;;;MCTY,qBAAqB;;;YAPjC,SAAS,SAAC;;gBAET,QAAQ,EAAE,eAAe;gBACzB,oPAA6C;gBAE7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;MCUY,kBAAkB;;;YAX9B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,qBAAqB;iBACtB;gBACD,OAAO,EAAE;oBACP,YAAY;oBAEZ,gBAAgB;oBAChB,gBAAgB;iBACjB;aACF;;;MCfY,eAAe,GAAG;IAC7B,oBAAoB;IACpB,wBAAwB;IACxB,sBAAsB;IACtB,qBAAqB;;;ACTvB;;;;;;"}
|