@aurodesignsystem-dev/auro-banner 0.0.0-pr87.0
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/CHANGELOG.md +246 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +192 -0
- package/demo/api.html +59 -0
- package/demo/api.js +1 -0
- package/demo/api.md +563 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-banner.min.js +367 -0
- package/demo/index.html +57 -0
- package/demo/index.js +4 -0
- package/demo/index.md +186 -0
- package/demo/index.min.js +4 -0
- package/dist/auro-banner-Clvffv3E.js +54 -0
- package/dist/index.d.ts +61 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +82 -0
package/demo/index.md
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
The index.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
+
README.md is created by running `npm run build:docs`.
|
|
4
|
+
This file is generated based on a template fetched from `./docs/partials/index.md`
|
|
5
|
+
-->
|
|
6
|
+
|
|
7
|
+
# Banner
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ../docs/partials/description.md -->
|
|
11
|
+
The `<auro-banner>` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.
|
|
12
|
+
|
|
13
|
+
The details are broken down into `prefix`, `title`, `description`, `action`, and `disclaimer`.
|
|
14
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
15
|
+
|
|
16
|
+
## auro-banner use cases
|
|
17
|
+
|
|
18
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
|
|
19
|
+
<!-- The below content is automatically added from ../docs/partials/useCases.md -->
|
|
20
|
+
Use the `<auro-banner>` element to:
|
|
21
|
+
|
|
22
|
+
* grab the attention of a user
|
|
23
|
+
* direct your user to another resource for further information
|
|
24
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
25
|
+
|
|
26
|
+
## Additional Information
|
|
27
|
+
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/readmeAddlInfo.md) -->
|
|
29
|
+
<!-- The below content is automatically added from ../docs/partials/readmeAddlInfo.md -->
|
|
30
|
+
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
31
|
+
**Do not** use `<auro-banner>` as a primary source of information.
|
|
32
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
33
|
+
|
|
34
|
+
## Example(s)
|
|
35
|
+
|
|
36
|
+
### Default Example
|
|
37
|
+
|
|
38
|
+
The default `<auro-banner>` element features configuration options when using using the `displayImage`, `contentImage`, `prefix`, `title`, `description`, `action` and `disclaimer` slots for structured content placement.
|
|
39
|
+
|
|
40
|
+
The `<auro-banner>` component must be used in conjunction with one of the following attributes: `billboard`, `hero`,`iconic`, `marquee`, or `roundedBorder`. The `billboard` attribute the most common use case.
|
|
41
|
+
|
|
42
|
+
**Note**: See the [auro-banner API page](https://auro.alaskaair.com/components/auro/banner/api) for more information on how to use this component's slots and attributes.
|
|
43
|
+
|
|
44
|
+
<div class="exampleWrapper">
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
|
|
46
|
+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
|
|
47
|
+
<auro-banner billboard>
|
|
48
|
+
<picture slot="displayImage">
|
|
49
|
+
<source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
|
|
50
|
+
<source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
|
|
51
|
+
<source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
|
|
52
|
+
<source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
|
|
53
|
+
<source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
|
|
54
|
+
<img src="https://picsum.photos/id/430/225/550" alt="" />
|
|
55
|
+
</picture>
|
|
56
|
+
<img
|
|
57
|
+
slot="contentImage"
|
|
58
|
+
src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
|
|
59
|
+
alt="Random insert"/>
|
|
60
|
+
<p slot="description">
|
|
61
|
+
We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
|
|
62
|
+
</p>
|
|
63
|
+
<auro-hyperlink
|
|
64
|
+
cta
|
|
65
|
+
secondary
|
|
66
|
+
href="/"
|
|
67
|
+
slot="action"
|
|
68
|
+
target="_blank">
|
|
69
|
+
More info
|
|
70
|
+
</auro-hyperlink>
|
|
71
|
+
</auro-banner>
|
|
72
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
73
|
+
</div>
|
|
74
|
+
<auro-accordion alignRight>
|
|
75
|
+
<span slot="trigger">See code</span>
|
|
76
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
|
|
77
|
+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<auro-banner billboard>
|
|
81
|
+
<picture slot="displayImage">
|
|
82
|
+
<source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
|
|
83
|
+
<source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
|
|
84
|
+
<source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
|
|
85
|
+
<source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
|
|
86
|
+
<source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
|
|
87
|
+
<img src="https://picsum.photos/id/430/225/550" alt="" />
|
|
88
|
+
</picture>
|
|
89
|
+
<img
|
|
90
|
+
slot="contentImage"
|
|
91
|
+
src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
|
|
92
|
+
alt="Random insert"/>
|
|
93
|
+
<p slot="description">
|
|
94
|
+
We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
|
|
95
|
+
</p>
|
|
96
|
+
<auro-hyperlink
|
|
97
|
+
cta
|
|
98
|
+
secondary
|
|
99
|
+
href="/"
|
|
100
|
+
slot="action"
|
|
101
|
+
target="_blank">
|
|
102
|
+
More info
|
|
103
|
+
</auro-hyperlink>
|
|
104
|
+
</auro-banner>
|
|
105
|
+
```
|
|
106
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
107
|
+
</auro-accordion>
|
|
108
|
+
|
|
109
|
+
## Recommended Use and Version Control
|
|
110
|
+
|
|
111
|
+
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-banner` custom element is defined automatically.
|
|
112
|
+
|
|
113
|
+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBanner.register(name)` method and pass in a unique name.
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
import { AuroBanner } from '@aurodesignsystem/auro-banner/class';
|
|
117
|
+
|
|
118
|
+
AuroBanner.register('custom-banner');
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
This will create a new custom element that you can use in your HTML that will function identically to the `auro-banner` element.
|
|
122
|
+
|
|
123
|
+
<div class="exampleWrapper">
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
125
|
+
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
126
|
+
<custom-banner billboard>
|
|
127
|
+
<picture slot="displayImage">
|
|
128
|
+
<source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
|
|
129
|
+
<source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
|
|
130
|
+
<source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
|
|
131
|
+
<source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
|
|
132
|
+
<source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
|
|
133
|
+
<img src="https://picsum.photos/id/430/225/550" alt="" />
|
|
134
|
+
</picture>
|
|
135
|
+
<img
|
|
136
|
+
slot="contentImage"
|
|
137
|
+
src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
|
|
138
|
+
alt="Random insert"/>
|
|
139
|
+
<p slot="description">
|
|
140
|
+
We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
|
|
141
|
+
</p>
|
|
142
|
+
<auro-hyperlink
|
|
143
|
+
cta
|
|
144
|
+
secondary
|
|
145
|
+
href="/"
|
|
146
|
+
slot="action"
|
|
147
|
+
target="_blank">
|
|
148
|
+
More info
|
|
149
|
+
</auro-hyperlink>
|
|
150
|
+
</custom-banner>
|
|
151
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
152
|
+
</div>
|
|
153
|
+
<auro-accordion alignRight>
|
|
154
|
+
<span slot="trigger">See code</span>
|
|
155
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
156
|
+
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
157
|
+
|
|
158
|
+
```html
|
|
159
|
+
<custom-banner billboard>
|
|
160
|
+
<picture slot="displayImage">
|
|
161
|
+
<source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
|
|
162
|
+
<source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
|
|
163
|
+
<source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
|
|
164
|
+
<source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
|
|
165
|
+
<source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
|
|
166
|
+
<img src="https://picsum.photos/id/430/225/550" alt="" />
|
|
167
|
+
</picture>
|
|
168
|
+
<img
|
|
169
|
+
slot="contentImage"
|
|
170
|
+
src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
|
|
171
|
+
alt="Random insert"/>
|
|
172
|
+
<p slot="description">
|
|
173
|
+
We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
|
|
174
|
+
</p>
|
|
175
|
+
<auro-hyperlink
|
|
176
|
+
cta
|
|
177
|
+
secondary
|
|
178
|
+
href="/"
|
|
179
|
+
slot="action"
|
|
180
|
+
target="_blank">
|
|
181
|
+
More info
|
|
182
|
+
</auro-hyperlink>
|
|
183
|
+
</custom-banner>
|
|
184
|
+
```
|
|
185
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
186
|
+
</auro-accordion>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import{css as e,LitElement as s}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{ifDefined as t}from"lit/directives/if-defined.js";import{unsafeStatic as i,html as r,literal as n}from"lit/static-html.js";class o{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}var l=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
|
|
2
|
+
`;class c extends s{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new o}static get properties(){return{level:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:!0},visualLevel:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:!0},color:{type:String,reflect:!0},margin:{type:String,reflect:!0},size:{type:String,reflect:!0}}}static get styles(){return[l]}static get displayClassMap(){return{800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){o.prototype.registerComponent(e,c)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header")}spacingDecision(e){if("both"===this.margin)switch(e){case"none":return"util_stackMarginnone--top util_stackMarginnone--bottom";case"25":return"util_stackMargin25--top util_stackMargin25--bottom";case"50":return"util_stackMargin50--top util_stackMargin50--bottom";case"100":return"util_stackMargin100--top util_stackMargin100--bottom";case"150":return"util_stackMargin150--top util_stackMargin150--bottom";case"200":return"util_stackMargin200--top util_stackMargin200--bottom";case"300":return"util_stackMargin300--top util_stackMargin300--bottom";case"400":return"util_stackMargin400--top util_stackMargin400--bottom";case"600":return"util_stackMargin600--top util_stackMargin600--bottom";case"800":return"util_stackMargin800--top util_stackMargin800--bottom";default:return""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case"none":return`util_stackMarginnone--${this.margin}`;case"25":return`util_stackMargin25--${this.margin}`;case"50":return`util_stackMargin50--${this.margin}`;case"100":return`util_stackMargin100--${this.margin}`;case"150":return`util_stackMargin150--${this.margin}`;case"200":return`util_stackMargin200--${this.margin}`;case"300":return`util_stackMargin300--${this.margin}`;case"400":return`util_stackMargin400--${this.margin}`;case"600":return`util_stackMarginX600--${this.margin}`;case"800":return`util_stackMargin800--${this.margin}`;default:return""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",n=this.spacingDecision(this.size),o=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],l={heading:!0,[o]:!0};n&&n.split(" ").forEach(e=>{e.trim()&&(l[e.trim()]=!0)});const m=a(l),d=i(`h${s}`);return r`<${d} class="${m}" style="color: ${t(this.color?this.color:void 0)}"><slot></slot></${d}>`}render(){return this.template(this.level)}}class m{generateElementName(e,s){let a=e;return a+="-",a+=s.replace(/[.]/g,"_"),a}generateTag(e,s,a){const t=this.generateElementName(e,s),r=n`${i(t)}`;return customElements.get(t)||customElements.define(t,class extends a{}),r}}class d{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}var g=e`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-banner-text-color)}:host([roundedBorder]) .disclaimer,:host([iconic]) .disclaimer,:host([billboard]) .disclaimer,:host([hero]) .disclaimer,:host([marquee]) .disclaimer{color:var(--ds-auro-banner-disclaimer-text-color)}:host([roundedBorder]) .title,:host([iconic]) .title,:host([billboard]) .title,:host([hero]) .title,:host([marquee]) .title{color:var(--ds-auro-banner-title-text-color)}:host([marquee][solid]),:host([onDark]){--ds-auro-banner-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([marquee][solid]) .title,:host([onDark]) .title{--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);color:var(--ds-auro-banner-title-text-color)}:host([iconic]) .roundIconBg{background:var(--ds-auro-banner-icon-container-color)}:host([marquee][solid]) .bannerWrapper{background-color:var(--ds-auro-banner-wrapper-container-color)}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-color:var(--ds-auro-banner-wrapper-border-color)}
|
|
3
|
+
`,h=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host([roundedBorder]) img,:host([iconic]) img,:host([hero]) img,:host([marquee]) img,:host([billboard]) img{display:block}:host([roundedBorder]) .bannerWrapper,:host([iconic]) .bannerWrapper,:host([hero]) .bannerWrapper,:host([marquee]) .bannerWrapper,:host([billboard]) .bannerWrapper{position:relative;overflow:hidden}:host([roundedBorder]) .action,:host([iconic]) .action,:host([hero]) .action,:host([marquee]) .action,:host([billboard]) .action{display:inline-block;margin:var(--ds-size-200, 1rem) 0}:host([roundedBorder]) .imageWrapper,:host([iconic]) .imageWrapper,:host([hero]) .imageWrapper,:host([marquee]) .imageWrapper,:host([billboard]) .imageWrapper{margin-bottom:var(--ds-size-200, 1rem);display:block}:host([roundedBorder]) .displayImage,:host([iconic]) .displayImage,:host([hero]) .displayImage,:host([marquee]) .displayImage,:host([billboard]) .displayImage{display:block;position:absolute;bottom:0}:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:var(--ds-size-400, 2rem) var(--ds-size-200, 1rem);overflow:hidden}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{padding:var(--ds-size-200, 1rem)}}:host([roundedBorder]) .title,:host([iconic]) .title,:host([hero]) .title,:host([marquee]) .title,:host([billboard]) .title{margin-bottom:var(--ds-size-200, 1rem)}:host([roundedBorder]) .description,:host([iconic]) .description,:host([hero]) .description,:host([marquee]) .description,:host([billboard]) .description{display:block}:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:150px}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:0}}@media screen and (min-width: 576px){:host([billboard]){max-height:24rem}}:host([billboard]) .bodyWrapper{align-items:center;padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 576px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 8rem}}@media screen and (min-width: 768px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 10rem}}:host([billboard]) .imageWrapper{display:block;margin-bottom:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([billboard]) .contentWrapper{margin-bottom:0}}:host([hero]) .displayImage,:host([marquee]) .displayImage{position:static;overflow:hidden}:host([hero]) .displayImage::slotted(img),:host([marquee]) .displayImage::slotted(img){display:block}:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([hero]) .displayImage,:host([marquee]) .displayImage{max-width:50%;right:0;position:absolute}:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper{text-align:left;width:50%;padding-left:0}}:host([iconic]) .iconAbsolute{position:absolute}:host([iconic]) .iconContainer{display:flex;align-items:center;justify-content:center;position:relative;top:-1.25rem}:host([iconic]) .roundIconBg{width:7.5rem;height:7.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute}:host([iconic]) .displayImage{display:none}@media screen and (min-width: 576px){:host([iconic]) .displayImage{display:block;max-width:50%;right:0;position:absolute;overflow:hidden}}:host([iconic]) .displayImage::slotted(img){display:block}@media screen and (min-width: 576px){:host([iconic]) .description{padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-300, 1.5rem)}}:host([iconic]) .contentWrapper{margin:0 auto var(--ds-size-600, 3rem);padding-bottom:var(--ds-size-600, 3rem)}:host([iconic]) .bodyWrapper{text-align:left;padding:var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) 0}@media screen and (min-width: 576px){:host([iconic]) .bodyWrapper{width:50%;padding-left:0}}:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}@media screen and (min-width: 768px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 1024px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-600, 3rem)}}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-width:1px;border-style:solid;border-radius:5px}:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{flex-basis:70%;flex-grow:1}}:host([roundedBorder]) .action,:host([roundedBorder][alignLeft]) .action{margin:0 0 1rem}:host([roundedBorder]) .description p,:host([roundedBorder][alignLeft]) .description p{margin:0}:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{align-items:center;padding:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{flex-direction:row}}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}}@media screen and (min-width: 1024px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 576px){:host([roundedBorder]) .imageWrapper,:host([roundedBorder][alignLeft]) .imageWrapper{flex-basis:30%;display:flex;margin-right:var(--ds-size-400, 2rem);margin-bottom:0}}:host([alignRight]) .bodyWrapper{align-items:flex-end;text-align:right}:host([alignLeft]) .bodyWrapper{align-items:flex-start;text-align:left}@media screen and (min-width: 576px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem);min-height:unset}}@media screen and (min-width: 768px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem) var(--ds-size-600, 3rem)}}
|
|
4
|
+
`,p=e`:host{--ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #265688);--ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #c5c5c5);--ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #00274a);--ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #959595)}
|
|
5
|
+
`;class y extends s{constructor(){super(),this.hero=!1,this.iconic=!1,this.marquee=!1,this.roundedBorder=!1;const e=new m;this.headerTag=e.generateTag("auro-header","5.0.0",c),this.runtimeUtils=new d}static register(e="auro-banner"){d.prototype.registerComponent(e,y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-banner");const e=this.shadowRoot.querySelectorAll(".bannerWrapper slot");for(const s of e)this.slt=s.assignedNodes(),0===this.slt.length&&s.removeAttribute("class")}static get properties(){return{...s.properties,hero:{type:Boolean,reflect:!0},iconic:{type:Boolean,reflect:!0},marquee:{type:Boolean,reflect:!0},roundedBorder:{type:Boolean,reflect:!0},iconbg:{type:String}}}static get styles(){return[h,g,p]}render(){return r`
|
|
6
|
+
<div class="bannerWrapper">
|
|
7
|
+
${this.roundedBorder?r``:r`
|
|
8
|
+
<slot name="displayImage" class="displayImage"></slot>`}
|
|
9
|
+
<div class="bodyWrapper">
|
|
10
|
+
${this.iconic?r`
|
|
11
|
+
<slot name="title"></slot>`:r``}
|
|
12
|
+
${this.hero?r`
|
|
13
|
+
<${this.headerTag} level="2" display="300" margin="top" size="none" class="title prefix">
|
|
14
|
+
<slot name="prefix"></slot>
|
|
15
|
+
</${this.headerTag}>
|
|
16
|
+
|
|
17
|
+
<${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
|
|
18
|
+
<slot name="title"></slot>
|
|
19
|
+
</${this.headerTag}>`:r``}
|
|
20
|
+
|
|
21
|
+
${this.marquee?r`
|
|
22
|
+
<${this.headerTag} level="2" display="400" margin="both" size="none" class="title marquee">
|
|
23
|
+
<slot name="title"></slot>
|
|
24
|
+
</${this.headerTag}>`:r``}
|
|
25
|
+
|
|
26
|
+
${this.marquee||this.hero||this.iconic||this.roundedBorder?r``:r`
|
|
27
|
+
<${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
|
|
28
|
+
<slot name="title"></slot>
|
|
29
|
+
</${this.headerTag}>`}
|
|
30
|
+
|
|
31
|
+
<slot name="contentImage" class="imageWrapper"></slot>
|
|
32
|
+
|
|
33
|
+
<div class="contentWrapper">
|
|
34
|
+
${this.roundedBorder?r`
|
|
35
|
+
<${this.headerTag} level="2" display="300" margin="both" size="none" class="title prefix">
|
|
36
|
+
<slot name="prefix"></slot>
|
|
37
|
+
</${this.headerTag}>
|
|
38
|
+
|
|
39
|
+
<${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
|
|
40
|
+
<slot name="title"></slot>
|
|
41
|
+
</${this.headerTag}>`:r``}
|
|
42
|
+
<slot name="description" class="description body-default"></slot>
|
|
43
|
+
<slot name="action" class="action"></slot>
|
|
44
|
+
<slot name="disclaimer" class="disclaimer body-xs"></slot>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
${this.iconic?r`
|
|
49
|
+
<div class="iconContainer">
|
|
50
|
+
<div class="roundIconBg" style="background: ${t(this.iconbg?this.iconbg:void 0)}">
|
|
51
|
+
<slot name="icon" class="icon"></slot>
|
|
52
|
+
</div>
|
|
53
|
+
</div>`:r``}
|
|
54
|
+
`}}export{y as A};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { css, LitElement } from 'lit';
|
|
2
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
|
+
import { html, unsafeStatic, literal } from 'lit/static-html.js';
|
|
5
|
+
|
|
6
|
+
class o{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{});}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,true);}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}var l=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
|
|
7
|
+
`;class c extends LitElement{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new o;}static get properties(){return {level:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:true},visualLevel:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:true},color:{type:String,reflect:true},margin:{type:String,reflect:true},size:{type:String,reflect:true}}}static get styles(){return [l]}static get displayClassMap(){return {800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){o.prototype.registerComponent(e,c);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header");}spacingDecision(e){if("both"===this.margin)switch(e){case "none":return "util_stackMarginnone--top util_stackMarginnone--bottom";case "25":return "util_stackMargin25--top util_stackMargin25--bottom";case "50":return "util_stackMargin50--top util_stackMargin50--bottom";case "100":return "util_stackMargin100--top util_stackMargin100--bottom";case "150":return "util_stackMargin150--top util_stackMargin150--bottom";case "200":return "util_stackMargin200--top util_stackMargin200--bottom";case "300":return "util_stackMargin300--top util_stackMargin300--bottom";case "400":return "util_stackMargin400--top util_stackMargin400--bottom";case "600":return "util_stackMargin600--top util_stackMargin600--bottom";case "800":return "util_stackMargin800--top util_stackMargin800--bottom";default:return ""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case "none":return `util_stackMarginnone--${this.margin}`;case "25":return `util_stackMargin25--${this.margin}`;case "50":return `util_stackMargin50--${this.margin}`;case "100":return `util_stackMargin100--${this.margin}`;case "150":return `util_stackMargin150--${this.margin}`;case "200":return `util_stackMargin200--${this.margin}`;case "300":return `util_stackMargin300--${this.margin}`;case "400":return `util_stackMargin400--${this.margin}`;case "600":return `util_stackMarginX600--${this.margin}`;case "800":return `util_stackMargin800--${this.margin}`;default:return ""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",n=this.spacingDecision(this.size),o=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],l={heading:true,[o]:true};n&&n.split(" ").forEach(e=>{e.trim()&&(l[e.trim()]=true);});const m=classMap(l),d=unsafeStatic(`h${s}`);return html`<${d} class="${m}" style="color: ${ifDefined(this.color?this.color:void 0)}"><slot></slot></${d}>`}render(){return this.template(this.level)}}class m{generateElementName(e,s){let a=e;return a+="-",a+=s.replace(/[.]/g,"_"),a}generateTag(e,s,a){const t=this.generateElementName(e,s),r=literal`${unsafeStatic(t)}`;return customElements.get(t)||customElements.define(t,class extends a{}),r}}class d{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{});}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,true);}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}var g=css`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-banner-text-color)}:host([roundedBorder]) .disclaimer,:host([iconic]) .disclaimer,:host([billboard]) .disclaimer,:host([hero]) .disclaimer,:host([marquee]) .disclaimer{color:var(--ds-auro-banner-disclaimer-text-color)}:host([roundedBorder]) .title,:host([iconic]) .title,:host([billboard]) .title,:host([hero]) .title,:host([marquee]) .title{color:var(--ds-auro-banner-title-text-color)}:host([marquee][solid]),:host([onDark]){--ds-auro-banner-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([marquee][solid]) .title,:host([onDark]) .title{--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);color:var(--ds-auro-banner-title-text-color)}:host([iconic]) .roundIconBg{background:var(--ds-auro-banner-icon-container-color)}:host([marquee][solid]) .bannerWrapper{background-color:var(--ds-auro-banner-wrapper-container-color)}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-color:var(--ds-auro-banner-wrapper-border-color)}
|
|
8
|
+
`,h=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host([roundedBorder]) img,:host([iconic]) img,:host([hero]) img,:host([marquee]) img,:host([billboard]) img{display:block}:host([roundedBorder]) .bannerWrapper,:host([iconic]) .bannerWrapper,:host([hero]) .bannerWrapper,:host([marquee]) .bannerWrapper,:host([billboard]) .bannerWrapper{position:relative;overflow:hidden}:host([roundedBorder]) .action,:host([iconic]) .action,:host([hero]) .action,:host([marquee]) .action,:host([billboard]) .action{display:inline-block;margin:var(--ds-size-200, 1rem) 0}:host([roundedBorder]) .imageWrapper,:host([iconic]) .imageWrapper,:host([hero]) .imageWrapper,:host([marquee]) .imageWrapper,:host([billboard]) .imageWrapper{margin-bottom:var(--ds-size-200, 1rem);display:block}:host([roundedBorder]) .displayImage,:host([iconic]) .displayImage,:host([hero]) .displayImage,:host([marquee]) .displayImage,:host([billboard]) .displayImage{display:block;position:absolute;bottom:0}:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:var(--ds-size-400, 2rem) var(--ds-size-200, 1rem);overflow:hidden}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{padding:var(--ds-size-200, 1rem)}}:host([roundedBorder]) .title,:host([iconic]) .title,:host([hero]) .title,:host([marquee]) .title,:host([billboard]) .title{margin-bottom:var(--ds-size-200, 1rem)}:host([roundedBorder]) .description,:host([iconic]) .description,:host([hero]) .description,:host([marquee]) .description,:host([billboard]) .description{display:block}:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:150px}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:0}}@media screen and (min-width: 576px){:host([billboard]){max-height:24rem}}:host([billboard]) .bodyWrapper{align-items:center;padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 576px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 8rem}}@media screen and (min-width: 768px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 10rem}}:host([billboard]) .imageWrapper{display:block;margin-bottom:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([billboard]) .contentWrapper{margin-bottom:0}}:host([hero]) .displayImage,:host([marquee]) .displayImage{position:static;overflow:hidden}:host([hero]) .displayImage::slotted(img),:host([marquee]) .displayImage::slotted(img){display:block}:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([hero]) .displayImage,:host([marquee]) .displayImage{max-width:50%;right:0;position:absolute}:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper{text-align:left;width:50%;padding-left:0}}:host([iconic]) .iconAbsolute{position:absolute}:host([iconic]) .iconContainer{display:flex;align-items:center;justify-content:center;position:relative;top:-1.25rem}:host([iconic]) .roundIconBg{width:7.5rem;height:7.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute}:host([iconic]) .displayImage{display:none}@media screen and (min-width: 576px){:host([iconic]) .displayImage{display:block;max-width:50%;right:0;position:absolute;overflow:hidden}}:host([iconic]) .displayImage::slotted(img){display:block}@media screen and (min-width: 576px){:host([iconic]) .description{padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-300, 1.5rem)}}:host([iconic]) .contentWrapper{margin:0 auto var(--ds-size-600, 3rem);padding-bottom:var(--ds-size-600, 3rem)}:host([iconic]) .bodyWrapper{text-align:left;padding:var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) 0}@media screen and (min-width: 576px){:host([iconic]) .bodyWrapper{width:50%;padding-left:0}}:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}@media screen and (min-width: 768px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 1024px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-600, 3rem)}}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-width:1px;border-style:solid;border-radius:5px}:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{flex-basis:70%;flex-grow:1}}:host([roundedBorder]) .action,:host([roundedBorder][alignLeft]) .action{margin:0 0 1rem}:host([roundedBorder]) .description p,:host([roundedBorder][alignLeft]) .description p{margin:0}:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{align-items:center;padding:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{flex-direction:row}}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}}@media screen and (min-width: 1024px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 576px){:host([roundedBorder]) .imageWrapper,:host([roundedBorder][alignLeft]) .imageWrapper{flex-basis:30%;display:flex;margin-right:var(--ds-size-400, 2rem);margin-bottom:0}}:host([alignRight]) .bodyWrapper{align-items:flex-end;text-align:right}:host([alignLeft]) .bodyWrapper{align-items:flex-start;text-align:left}@media screen and (min-width: 576px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem);min-height:unset}}@media screen and (min-width: 768px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem) var(--ds-size-600, 3rem)}}
|
|
9
|
+
`,p=css`:host{--ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #265688);--ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #c5c5c5);--ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #00274a);--ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #959595)}
|
|
10
|
+
`;class y extends LitElement{constructor(){super(),this.hero=false,this.iconic=false,this.marquee=false,this.roundedBorder=false;const e=new m;this.headerTag=e.generateTag("auro-header","5.0.0",c),this.runtimeUtils=new d;}static register(e="auro-banner"){d.prototype.registerComponent(e,y);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-banner");const e=this.shadowRoot.querySelectorAll(".bannerWrapper slot");for(const s of e)this.slt=s.assignedNodes(),0===this.slt.length&&s.removeAttribute("class");}static get properties(){return {...LitElement.properties,hero:{type:Boolean,reflect:true},iconic:{type:Boolean,reflect:true},marquee:{type:Boolean,reflect:true},roundedBorder:{type:Boolean,reflect:true},iconbg:{type:String}}}static get styles(){return [h,g,p]}render(){return html`
|
|
11
|
+
<div class="bannerWrapper">
|
|
12
|
+
${this.roundedBorder?html``:html`
|
|
13
|
+
<slot name="displayImage" class="displayImage"></slot>`}
|
|
14
|
+
<div class="bodyWrapper">
|
|
15
|
+
${this.iconic?html`
|
|
16
|
+
<slot name="title"></slot>`:html``}
|
|
17
|
+
${this.hero?html`
|
|
18
|
+
<${this.headerTag} level="2" display="300" margin="top" size="none" class="title prefix">
|
|
19
|
+
<slot name="prefix"></slot>
|
|
20
|
+
</${this.headerTag}>
|
|
21
|
+
|
|
22
|
+
<${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
|
|
23
|
+
<slot name="title"></slot>
|
|
24
|
+
</${this.headerTag}>`:html``}
|
|
25
|
+
|
|
26
|
+
${this.marquee?html`
|
|
27
|
+
<${this.headerTag} level="2" display="400" margin="both" size="none" class="title marquee">
|
|
28
|
+
<slot name="title"></slot>
|
|
29
|
+
</${this.headerTag}>`:html``}
|
|
30
|
+
|
|
31
|
+
${this.marquee||this.hero||this.iconic||this.roundedBorder?html``:html`
|
|
32
|
+
<${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
|
|
33
|
+
<slot name="title"></slot>
|
|
34
|
+
</${this.headerTag}>`}
|
|
35
|
+
|
|
36
|
+
<slot name="contentImage" class="imageWrapper"></slot>
|
|
37
|
+
|
|
38
|
+
<div class="contentWrapper">
|
|
39
|
+
${this.roundedBorder?html`
|
|
40
|
+
<${this.headerTag} level="2" display="300" margin="both" size="none" class="title prefix">
|
|
41
|
+
<slot name="prefix"></slot>
|
|
42
|
+
</${this.headerTag}>
|
|
43
|
+
|
|
44
|
+
<${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
|
|
45
|
+
<slot name="title"></slot>
|
|
46
|
+
</${this.headerTag}>`:html``}
|
|
47
|
+
<slot name="description" class="description body-default"></slot>
|
|
48
|
+
<slot name="action" class="action"></slot>
|
|
49
|
+
<slot name="disclaimer" class="disclaimer body-xs"></slot>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
${this.iconic?html`
|
|
54
|
+
<div class="iconContainer">
|
|
55
|
+
<div class="roundIconBg" style="background: ${ifDefined(this.iconbg?this.iconbg:void 0)}">
|
|
56
|
+
<slot name="icon" class="icon"></slot>
|
|
57
|
+
</div>
|
|
58
|
+
</div>`:html``}
|
|
59
|
+
`}}
|
|
60
|
+
|
|
61
|
+
export { y as AuroBanner };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{A as AuroBanner}from"./auro-banner-Clvffv3E.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{A as i}from"./auro-banner-Clvffv3E.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();
|
package/package.json
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"//": [
|
|
3
|
+
"================================================================================",
|
|
4
|
+
"# To work within the development environment, run the following tasks",
|
|
5
|
+
" 1. $ npm run dev",
|
|
6
|
+
" 2. Go to http://localhost:8000",
|
|
7
|
+
"================================================================================"
|
|
8
|
+
],
|
|
9
|
+
"name": "@aurodesignsystem-dev/auro-banner",
|
|
10
|
+
"version": "0.0.0-pr87.0",
|
|
11
|
+
"description": "auro-banner HTML custom element",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/AlaskaAirlines/auro-banner"
|
|
15
|
+
},
|
|
16
|
+
"type": "module",
|
|
17
|
+
"main": "dist/registered.js",
|
|
18
|
+
"types": "dist/index.d.ts",
|
|
19
|
+
"license": "Apache-2.0",
|
|
20
|
+
"engines": {
|
|
21
|
+
"node": "^20.x || ^22.x"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"lit": "^3.3.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.0.3",
|
|
28
|
+
"@aurodesignsystem/auro-config": "^1.3.0",
|
|
29
|
+
"@aurodesignsystem/auro-header": "^5.0.0",
|
|
30
|
+
"@aurodesignsystem/auro-library": "^5.5.3",
|
|
31
|
+
"@aurodesignsystem/design-tokens": "^8.5.0",
|
|
32
|
+
"@aurodesignsystem/webcorestylesheets": "10.1.0",
|
|
33
|
+
"husky": "^9.1.7"
|
|
34
|
+
},
|
|
35
|
+
"browserslist": [
|
|
36
|
+
"last 2 Chrome versions",
|
|
37
|
+
"last 2 iOS major versions",
|
|
38
|
+
"last 2 Firefox versions",
|
|
39
|
+
"last 2 Edge versions",
|
|
40
|
+
"last 2 Safari major versions"
|
|
41
|
+
],
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"access": "public"
|
|
44
|
+
},
|
|
45
|
+
"keywords": [
|
|
46
|
+
"alaska airlines",
|
|
47
|
+
"auro",
|
|
48
|
+
"design system",
|
|
49
|
+
"web components"
|
|
50
|
+
],
|
|
51
|
+
"scripts": {
|
|
52
|
+
"build": "auro build",
|
|
53
|
+
"build:version": "node ./scripts/version.mjs",
|
|
54
|
+
"dev": "auro dev -w -s",
|
|
55
|
+
"dev:open": "auro dev -w -s --open",
|
|
56
|
+
"lint": "biome check --no-errors-on-unmatched && stylelint \"./src/**/*.scss\"",
|
|
57
|
+
"lint:fix": "biome check --fix --no-errors-on-unmatched && stylelint \"./src/**/*.scss\" --fix",
|
|
58
|
+
"test": "auro test",
|
|
59
|
+
"test:watch": "auro test --watch",
|
|
60
|
+
"prepare": "husky"
|
|
61
|
+
},
|
|
62
|
+
"exports": {
|
|
63
|
+
"./package.json": "./package.json",
|
|
64
|
+
"./readme.md": "./README.md",
|
|
65
|
+
".": "./dist/registered.js",
|
|
66
|
+
"./demo/*.md": "./demo/*.md",
|
|
67
|
+
"./demo/*.js": "./demo/*.min.js",
|
|
68
|
+
"./class": {
|
|
69
|
+
"module": "./dist/index.js",
|
|
70
|
+
"types": "./dist/index.d.ts",
|
|
71
|
+
"default": "./dist/index.js"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"files": [
|
|
75
|
+
"dist/**/*",
|
|
76
|
+
"demo/**/*",
|
|
77
|
+
"CHANGELOG.md",
|
|
78
|
+
"README.md",
|
|
79
|
+
"LICENSE",
|
|
80
|
+
"NOTICE"
|
|
81
|
+
]
|
|
82
|
+
}
|