scu-web-components 0.0.24 → 0.0.25
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/dist/chunks/chunk.6DQQWKEH.js +207 -0
- package/dist/chunks/chunk.6DQQWKEH.js.map +7 -0
- package/dist/chunks/chunk.6UC46GFP.js +246 -0
- package/dist/chunks/chunk.6UC46GFP.js.map +7 -0
- package/dist/chunks/chunk.ASPERYN6.js +17 -0
- package/dist/chunks/chunk.ASPERYN6.js.map +7 -0
- package/dist/chunks/chunk.CY7BMNC7.js +2 -0
- package/dist/chunks/chunk.CY7BMNC7.js.map +7 -0
- package/dist/chunks/chunk.D2XBOP43.js +4 -0
- package/dist/chunks/chunk.D2XBOP43.js.map +7 -0
- package/dist/chunks/chunk.NAXVDSZN.js +2 -0
- package/dist/chunks/chunk.NAXVDSZN.js.map +7 -0
- package/dist/chunks/chunk.VPW473FF.js +2 -0
- package/dist/chunks/chunk.VPW473FF.js.map +7 -0
- package/dist/custom-elements.json +605 -605
- package/dist/docs/components/manifest.json +70 -70
- package/dist/docs/config.json +1 -1
- package/dist/scw-button/ScwButton.js +1 -1
- package/dist/scw-button/scw-button.js +1 -1
- package/dist/scw-card/ScwCard.js +1 -1
- package/dist/scw-card/scw-card.js +1 -1
- package/dist/scw-components.js +1 -1
- package/dist/scw-form-component/scw-form-component.js +1 -1
- package/dist/scw-input/scw-input.js +1 -1
- package/dist/scw-menu-item/ScwMenuItem.js +1 -1
- package/dist/scw-menu-item/scw-menu-item.js +1 -1
- package/dist/scw-select/scw-select.js +1 -1
- package/dist/scw-single-input/scw-single-input.js +1 -1
- package/dist/scw-textarea/scw-textarea.js +1 -1
- package/dist/scw.js +1 -1
- package/dist/utils/suffix.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import{a as n}from"./chunk.MOWV5A2M.js";import{a}from"./chunk.EFY6AEW3.js";import{a as i,b as s}from"./chunk.HCMPRDIX.js";import{a as o}from"./chunk.ZS4C3T6Z.js";import{g as e}from"./chunk.5YJY6NT6.js";var c=i`
|
|
2
|
+
:host([design=main]) {
|
|
3
|
+
outline: none;
|
|
4
|
+
background-color: rgba(0, 0, 0, 0);
|
|
5
|
+
padding-left: var(--scw-spacing-1);
|
|
6
|
+
padding-right: var(--scw-spacing-1);
|
|
7
|
+
padding-top: calc(var(--scw-spacing-1) * 0.8);
|
|
8
|
+
padding-bottom: var(--scw-spacing-1);
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
}
|
|
11
|
+
:host([design=main]) .label {
|
|
12
|
+
text-align: LEFT;
|
|
13
|
+
font: var(--scw-type-text-bold-condensed-07-font);
|
|
14
|
+
color: var(--scw-color-grey-02);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host([design=main]:focus-visible) {
|
|
18
|
+
background-color: var(--scw-color-grey-10);
|
|
19
|
+
border-radius: 4px 4px 4px 4px;
|
|
20
|
+
box-shadow: var(--scw-effect-focus-shadow);
|
|
21
|
+
padding-left: var(--scw-spacing-1);
|
|
22
|
+
padding-right: var(--scw-spacing-1);
|
|
23
|
+
padding-top: calc(var(--scw-spacing-1) * 0.8);
|
|
24
|
+
padding-bottom: var(--scw-spacing-1);
|
|
25
|
+
}
|
|
26
|
+
:host([design=main]:focus-visible) .label {
|
|
27
|
+
text-align: LEFT;
|
|
28
|
+
font: var(--scw-type-text-bold-condensed-07-font);
|
|
29
|
+
color: var(--scw-color-grey-02);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:host([design=main]:hover) {
|
|
33
|
+
background-color: rgba(0, 0, 0, 0);
|
|
34
|
+
padding-left: var(--scw-spacing-1);
|
|
35
|
+
padding-right: var(--scw-spacing-1);
|
|
36
|
+
padding-top: calc(var(--scw-spacing-1) * 0.8);
|
|
37
|
+
padding-bottom: var(--scw-spacing-1);
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
}
|
|
40
|
+
:host([design=main]:hover) .label {
|
|
41
|
+
text-align: LEFT;
|
|
42
|
+
font: var(--scw-type-text-bold-condensed-07-font);
|
|
43
|
+
color: var(--scw-color-03, var(--scw-color-primary-03));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([design=main][aria-selected=true]) {
|
|
47
|
+
background-color: rgba(0, 0, 0, 0);
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-flow: column nowrap;
|
|
50
|
+
justify-content: flex-start;
|
|
51
|
+
align-items: flex-start;
|
|
52
|
+
padding-left: var(--scw-spacing-1);
|
|
53
|
+
padding-right: var(--scw-spacing-1);
|
|
54
|
+
padding-top: calc(var(--scw-spacing-1) * 0.8);
|
|
55
|
+
padding-bottom: 0px;
|
|
56
|
+
}
|
|
57
|
+
:host([design=main][aria-selected=true]) > *:not(:last-child) {
|
|
58
|
+
margin-bottom: calc(var(--scw-spacing-1) * 0.8);
|
|
59
|
+
--margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
|
|
60
|
+
}
|
|
61
|
+
:host([design=main][aria-selected=true]) .label {
|
|
62
|
+
text-align: LEFT;
|
|
63
|
+
font: var(--scw-type-text-bold-condensed-07-font);
|
|
64
|
+
color: var(--scw-color-grey-02);
|
|
65
|
+
align-self: stretch;
|
|
66
|
+
flex: 1;
|
|
67
|
+
}
|
|
68
|
+
:host([design=main][aria-selected=true]) .selected {
|
|
69
|
+
background-color: var(--scw-color-03, var(--scw-color-primary-03));
|
|
70
|
+
align-self: stretch;
|
|
71
|
+
height: 2px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host([design=main][aria-disabled=true]) {
|
|
75
|
+
background-color: rgba(0, 0, 0, 0);
|
|
76
|
+
padding-left: var(--scw-spacing-1);
|
|
77
|
+
padding-right: var(--scw-spacing-1);
|
|
78
|
+
padding-top: calc(var(--scw-spacing-1) * 0.8);
|
|
79
|
+
padding-bottom: var(--scw-spacing-1);
|
|
80
|
+
cursor: auto;
|
|
81
|
+
pointer-events: none;
|
|
82
|
+
}
|
|
83
|
+
:host([design=main][aria-disabled=true]) .label {
|
|
84
|
+
text-align: LEFT;
|
|
85
|
+
font: var(--scw-type-text-bold-condensed-07-font);
|
|
86
|
+
color: var(--scw-color-grey-08);
|
|
87
|
+
}
|
|
88
|
+
:host([design=main][aria-disabled=true]) .icon svg {
|
|
89
|
+
fill: var(--scw-color-grey-08);
|
|
90
|
+
}
|
|
91
|
+
:host([design=main][aria-disabled=true]) .icon svg * {
|
|
92
|
+
fill: var(--scw-color-grey-08);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([design=utility]) .scw-link-base {
|
|
96
|
+
background-color: rgba(0, 0, 0, 0);
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-flow: row nowrap;
|
|
99
|
+
justify-content: flex-start;
|
|
100
|
+
align-items: center;
|
|
101
|
+
padding-left: var(--scw-spacing-1);
|
|
102
|
+
padding-right: var(--scw-spacing-1);
|
|
103
|
+
padding-top: 0px;
|
|
104
|
+
padding-bottom: 0px;
|
|
105
|
+
display: inline-flex;
|
|
106
|
+
}
|
|
107
|
+
:host([design=utility]) .scw-link-base > *:not(:last-child) {
|
|
108
|
+
margin-right: calc(var(--scw-spacing-1) * 0.4);
|
|
109
|
+
--margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
|
|
110
|
+
}
|
|
111
|
+
:host([design=utility]) .label {
|
|
112
|
+
text-align: LEFT;
|
|
113
|
+
font: var(--scw-type-text-font);
|
|
114
|
+
color: var(--scw-color-grey-02);
|
|
115
|
+
min-height: 19px;
|
|
116
|
+
}
|
|
117
|
+
:host([design=utility]) .icon {
|
|
118
|
+
width: 24px;
|
|
119
|
+
height: 24px;
|
|
120
|
+
}
|
|
121
|
+
:host([design=utility]) .icon svg {
|
|
122
|
+
box-sizing: border-box;
|
|
123
|
+
vertical-align: top;
|
|
124
|
+
width: 100%;
|
|
125
|
+
height: 100%;
|
|
126
|
+
fill: var(--scw-color-grey-02);
|
|
127
|
+
}
|
|
128
|
+
:host([design=utility]) .icon svg * {
|
|
129
|
+
fill: var(--scw-color-grey-02);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([design=utility]:focus-visible) {
|
|
133
|
+
background-color: var(--scw-color-grey-10);
|
|
134
|
+
border-radius: 4px 4px 4px 4px;
|
|
135
|
+
box-shadow: var(--scw-effect-focus-shadow);
|
|
136
|
+
}
|
|
137
|
+
:host([design=utility]:focus-visible) .label {
|
|
138
|
+
text-align: LEFT;
|
|
139
|
+
font: var(--scw-type-text-font);
|
|
140
|
+
color: var(--scw-color-grey-02);
|
|
141
|
+
}
|
|
142
|
+
:host([design=utility]:focus-visible) .icon svg {
|
|
143
|
+
fill: var(--scw-color-grey-02);
|
|
144
|
+
}
|
|
145
|
+
:host([design=utility]:focus-visible) .icon svg * {
|
|
146
|
+
fill: var(--scw-color-grey-02);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
:host([design=utility]:hover) {
|
|
150
|
+
background-color: rgba(0, 0, 0, 0);
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
}
|
|
153
|
+
:host([design=utility]:hover) .label {
|
|
154
|
+
text-align: LEFT;
|
|
155
|
+
font: var(--scw-type-text-font);
|
|
156
|
+
color: var(--scw-color-03, var(--scw-color-primary-03));
|
|
157
|
+
}
|
|
158
|
+
:host([design=utility]:hover) .icon svg {
|
|
159
|
+
fill: var(--scw-color-primary-03);
|
|
160
|
+
}
|
|
161
|
+
:host([design=utility]:hover) .icon svg * {
|
|
162
|
+
fill: var(--scw-color-primary-03);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
:host([design=utility][aria-selected=true]) {
|
|
166
|
+
background-color: rgba(0, 0, 0, 0);
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
}
|
|
169
|
+
:host([design=utility][aria-selected=true]) .label {
|
|
170
|
+
text-align: LEFT;
|
|
171
|
+
font: var(--scw-type-text-font);
|
|
172
|
+
color: var(--scw-color-03, var(--scw-color-primary-03));
|
|
173
|
+
}
|
|
174
|
+
:host([design=utility][aria-selected=true]) .icon svg {
|
|
175
|
+
fill: var(--scw-color-primary-03);
|
|
176
|
+
}
|
|
177
|
+
:host([design=utility][aria-selected=true]) .icon svg * {
|
|
178
|
+
fill: var(--scw-color-primary-03);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
:host([design=utility][aria-disabled=true]) {
|
|
182
|
+
cursor: auto;
|
|
183
|
+
pointer-events: none;
|
|
184
|
+
background-color: rgba(0, 0, 0, 0);
|
|
185
|
+
}
|
|
186
|
+
:host([design=utility][aria-disabled=true]) .label {
|
|
187
|
+
text-align: LEFT;
|
|
188
|
+
font: var(--scw-type-text-font);
|
|
189
|
+
color: var(--scw-color-grey-07);
|
|
190
|
+
}
|
|
191
|
+
:host([design=utility][aria-disabled=true]) .icon svg {
|
|
192
|
+
fill: var(--scw-color-grey-07);
|
|
193
|
+
}
|
|
194
|
+
:host([design=utility][aria-disabled=true]) .icon svg * {
|
|
195
|
+
fill: var(--scw-color-grey-07);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
:host {
|
|
199
|
+
white-space: nowrap;
|
|
200
|
+
}
|
|
201
|
+
:host .label {
|
|
202
|
+
white-space: nowrap;
|
|
203
|
+
}`;var t=class extends a{constructor(){super();this.ariaSelected="false";this.element="menu-item",this.setAttribute("role","menuitem")}static get styles(){return[super.styles,c]}hasPopup(){let r=this.nextElementSibling;return!!(r&&r.nodeName.indexOf("SCW-MENU")===0)}doShowIcon(){return!!(super.doShowIcon()&&this.design!=="main")}validDesigns(){return{...super.validDesigns(),...n}}connectedCallback(){super.connectedCallback(),this.hasPopup()&&this.setAttribute("aria-haspopup","true")}renderContent(){return this.design==="main"&&this.ariaSelected==="true"?(this.setAttribute("aria-current","page"),o`
|
|
204
|
+
<div>${super.renderContent()}</div>
|
|
205
|
+
<div class="selected"></div>
|
|
206
|
+
`):(this.removeAttribute("aria-current"),super.renderContent())}render(){return this.renderLink(this.renderContent())}};e([s({type:String,attribute:"aria-selected"})],t.prototype,"ariaSelected",2);export{t as a};
|
|
207
|
+
//# sourceMappingURL=chunk.6DQQWKEH.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-menu-item/scss/scw-menu-item.scss", "../../src/scw-menu-item/ScwMenuItem.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host([design=main]) {\n outline: none;\n background-color: rgba(0, 0, 0, 0);\n padding-left: var(--scw-spacing-1);\n padding-right: var(--scw-spacing-1);\n padding-top: calc(var(--scw-spacing-1) * 0.8);\n padding-bottom: var(--scw-spacing-1);\n display: inline-flex;\n}\n:host([design=main]) .label {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-07-font);\n color: var(--scw-color-grey-02);\n}\n\n:host([design=main]:focus-visible) {\n background-color: var(--scw-color-grey-10);\n border-radius: 4px 4px 4px 4px;\n box-shadow: var(--scw-effect-focus-shadow);\n padding-left: var(--scw-spacing-1);\n padding-right: var(--scw-spacing-1);\n padding-top: calc(var(--scw-spacing-1) * 0.8);\n padding-bottom: var(--scw-spacing-1);\n}\n:host([design=main]:focus-visible) .label {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-07-font);\n color: var(--scw-color-grey-02);\n}\n\n:host([design=main]:hover) {\n background-color: rgba(0, 0, 0, 0);\n padding-left: var(--scw-spacing-1);\n padding-right: var(--scw-spacing-1);\n padding-top: calc(var(--scw-spacing-1) * 0.8);\n padding-bottom: var(--scw-spacing-1);\n cursor: pointer;\n}\n:host([design=main]:hover) .label {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-07-font);\n color: var(--scw-color-03, var(--scw-color-primary-03));\n}\n\n:host([design=main][aria-selected=true]) {\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: var(--scw-spacing-1);\n padding-right: var(--scw-spacing-1);\n padding-top: calc(var(--scw-spacing-1) * 0.8);\n padding-bottom: 0px;\n}\n:host([design=main][aria-selected=true]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([design=main][aria-selected=true]) .label {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-07-font);\n color: var(--scw-color-grey-02);\n align-self: stretch;\n flex: 1;\n}\n:host([design=main][aria-selected=true]) .selected {\n background-color: var(--scw-color-03, var(--scw-color-primary-03));\n align-self: stretch;\n height: 2px;\n}\n\n:host([design=main][aria-disabled=true]) {\n background-color: rgba(0, 0, 0, 0);\n padding-left: var(--scw-spacing-1);\n padding-right: var(--scw-spacing-1);\n padding-top: calc(var(--scw-spacing-1) * 0.8);\n padding-bottom: var(--scw-spacing-1);\n cursor: auto;\n pointer-events: none;\n}\n:host([design=main][aria-disabled=true]) .label {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-07-font);\n color: var(--scw-color-grey-08);\n}\n:host([design=main][aria-disabled=true]) .icon svg {\n fill: var(--scw-color-grey-08);\n}\n:host([design=main][aria-disabled=true]) .icon svg * {\n fill: var(--scw-color-grey-08);\n}\n\n:host([design=utility]) .scw-link-base {\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n padding-left: var(--scw-spacing-1);\n padding-right: var(--scw-spacing-1);\n padding-top: 0px;\n padding-bottom: 0px;\n display: inline-flex;\n}\n:host([design=utility]) .scw-link-base > *:not(:last-child) {\n margin-right: calc(var(--scw-spacing-1) * 0.4);\n --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );\n}\n:host([design=utility]) .label {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-grey-02);\n min-height: 19px;\n}\n:host([design=utility]) .icon {\n width: 24px;\n height: 24px;\n}\n:host([design=utility]) .icon svg {\n box-sizing: border-box;\n vertical-align: top;\n width: 100%;\n height: 100%;\n fill: var(--scw-color-grey-02);\n}\n:host([design=utility]) .icon svg * {\n fill: var(--scw-color-grey-02);\n}\n\n:host([design=utility]:focus-visible) {\n background-color: var(--scw-color-grey-10);\n border-radius: 4px 4px 4px 4px;\n box-shadow: var(--scw-effect-focus-shadow);\n}\n:host([design=utility]:focus-visible) .label {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-grey-02);\n}\n:host([design=utility]:focus-visible) .icon svg {\n fill: var(--scw-color-grey-02);\n}\n:host([design=utility]:focus-visible) .icon svg * {\n fill: var(--scw-color-grey-02);\n}\n\n:host([design=utility]:hover) {\n background-color: rgba(0, 0, 0, 0);\n cursor: pointer;\n}\n:host([design=utility]:hover) .label {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-03, var(--scw-color-primary-03));\n}\n:host([design=utility]:hover) .icon svg {\n fill: var(--scw-color-primary-03);\n}\n:host([design=utility]:hover) .icon svg * {\n fill: var(--scw-color-primary-03);\n}\n\n:host([design=utility][aria-selected=true]) {\n background-color: rgba(0, 0, 0, 0);\n cursor: pointer;\n}\n:host([design=utility][aria-selected=true]) .label {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-03, var(--scw-color-primary-03));\n}\n:host([design=utility][aria-selected=true]) .icon svg {\n fill: var(--scw-color-primary-03);\n}\n:host([design=utility][aria-selected=true]) .icon svg * {\n fill: var(--scw-color-primary-03);\n}\n\n:host([design=utility][aria-disabled=true]) {\n cursor: auto;\n pointer-events: none;\n background-color: rgba(0, 0, 0, 0);\n}\n:host([design=utility][aria-disabled=true]) .label {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-grey-07);\n}\n:host([design=utility][aria-disabled=true]) .icon svg {\n fill: var(--scw-color-grey-07);\n}\n:host([design=utility][aria-disabled=true]) .icon svg * {\n fill: var(--scw-color-grey-07);\n}\n\n:host {\n white-space: nowrap;\n}\n:host .label {\n white-space: nowrap;\n}`;\n", "import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport ScwLink from '../scw-link/ScwLink';\nimport styles from './scss/scw-menu-item.scss';\nimport {ScwMenuItemDesigns} from './scw-menu-item-enums';\nimport {Components} from '../utils/enums/Components';\n\n/**\n * ScwMenuItem\n * @class\n * @tag scw-menu-item\n *\n * @slot [default=\"<a href target />\"]\n (OPTIONAL) anchor (for SEO) will determine the label, href, and target.\n * @slot [default=\"<... />\"]\n (OPTIONAL) random content (paired with design=\"plain\") will wrap that\n content with a link.\n */\nexport default class ScwMenuItem extends ScwLink {\n // ============== ScwMenuItem ================================================\n /**\n * (ScwMenuItem) selected state\n * @type {Boolean}\n */\n @property({type: String, attribute: 'aria-selected'})\n ariaSelected = 'false';\n\n /**\n * extending styles from ScwLink\n * https://stackoverflow.com/questions/60266303/\n * how-to-extend-and-style-existing-litelements\n */\n static get styles() {\n return [\n super.styles,\n styles,\n ];\n }\n\n /**\n * Constructor\n */\n constructor() {\n super();\n this.element = Components.menuItem;\n this.setAttribute('role', 'menuitem');\n }\n\n /**\n * determines if this menu item has a sub menu\n * @return {boolean}\n */\n hasPopup() {\n const next = this.nextElementSibling;\n // if (next && next['element'] === Components.menu ) {\n // the component may not be initialized yet...\n if (next && next.nodeName.indexOf('SCW-MENU') === 0 ) {\n return true;\n }\n return false;\n }\n\n /**\n * Way to extend valid design icon types...\n * @return {boolean}\n */\n doShowIcon() : boolean {\n const superDoShowIcon = super.doShowIcon();\n if ( superDoShowIcon &&\n this.design !== ScwMenuItemDesigns.main\n ) {\n return true;\n }\n return false;\n }\n\n /**\n * Way to extend valid design types...\n * @return {object} object of valid designs relative to this object\n */\n validDesigns() : object {\n return {\n ...super.validDesigns(),\n ...ScwMenuItemDesigns,\n };\n }\n\n /** connectedCallback */\n connectedCallback(): void {\n super.connectedCallback();\n if (this.hasPopup() ) {\n this.setAttribute( 'aria-haspopup', 'true' );\n }\n }\n\n /**\n * renderContent\n * @return {object}\n */\n renderContent() {\n if (\n this.design === ScwMenuItemDesigns.main &&\n this.ariaSelected === 'true'\n ) {\n this.setAttribute( 'aria-current', 'page' );\n // protect initial flex-v...a link with icons is flex-h\n return html`\n <div>${super.renderContent()}</div>\n <div class=\"selected\"></div>\n `;\n } else {\n this.removeAttribute( 'aria-current' );\n return super.renderContent();\n }\n }\n\n /**\n *\n * @return {object}\n */\n render(): object {\n return this.renderLink(\n this.renderContent(),\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "0MACA,GAAO,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;GCiBf,mBAAyC,EAAQ,CAwB9C,aAAc,CACZ,MAAM,EAlBP,kBAAe,QAmBd,KAAK,QAAU,YACf,KAAK,aAAa,OAAQ,UAAU,CACtC,WAdW,SAAS,CAClB,MAAO,CACL,MAAM,OACN,CACF,CACF,CAeD,UAAW,CACT,GAAM,GAAO,KAAK,mBAGlB,MAAI,MAAQ,EAAK,SAAS,QAAQ,UAAU,IAAM,EAIpD,CAMA,YAAuB,CAErB,MAAK,GADmB,MAAM,WAAW,GAEzC,KAAK,SAAW,OAKlB,CAMA,cAAwB,CACtB,MAAO,IACF,MAAM,aAAa,KACnB,CACL,CACF,CAGA,mBAA0B,CACxB,MAAM,kBAAkB,EACpB,KAAK,SAAS,GAChB,KAAK,aAAc,gBAAiB,MAAO,CAE/C,CAMA,eAAgB,CACd,MACE,MAAK,SAAW,QAChB,KAAK,eAAiB,OAErB,MAAK,aAAc,eAAgB,MAAO,EAEnC;AAAA,iBACG,MAAM,cAAc;AAAA;AAAA,WAI7B,MAAK,gBAAiB,cAAe,EAC/B,MAAM,cAAc,EAEhC,CAMA,QAAiB,CACf,MAAO,MAAK,WACV,KAAK,cAAc,CACrB,CACF,CACF,EApGI,GADF,AAAC,EAAS,CAAC,KAAM,OAAQ,UAAW,eAAe,CAAC,GAClD,AAPJ,EAOI",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import{a as r,b as s}from"./chunk.RGGLFZST.js";import{a as g}from"./chunk.NAXVDSZN.js";import{a as n,d as c}from"./chunk.7I6Z5MNC.js";import{a,b as i,e as l}from"./chunk.HCMPRDIX.js";import{a as d}from"./chunk.Y2P62L7U.js";import{g as e}from"./chunk.5YJY6NT6.js";var p=a`
|
|
2
|
+
:host {
|
|
3
|
+
/* scw element */
|
|
4
|
+
position: relative;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
--margin-right: initial;
|
|
7
|
+
--margin-bottom: initial;
|
|
8
|
+
--gap-h-int: initial;
|
|
9
|
+
--gap-v-int: initial;
|
|
10
|
+
margin-right: var(--margin-right, var(--gap-h-int, initial));
|
|
11
|
+
margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:host([warning]) {
|
|
16
|
+
outline: 2px solid red !important;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([size=medium]) {
|
|
20
|
+
display: block;
|
|
21
|
+
background-color: rgba(0, 0, 0, 0);
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-flow: column nowrap;
|
|
24
|
+
justify-content: flex-start;
|
|
25
|
+
align-items: flex-start;
|
|
26
|
+
padding-left: 0px;
|
|
27
|
+
padding-right: 0px;
|
|
28
|
+
padding-top: 0px;
|
|
29
|
+
padding-bottom: 0px;
|
|
30
|
+
/*.image-box {
|
|
31
|
+
width: 100%;
|
|
32
|
+
padding-bottom: 38.8888888889%;
|
|
33
|
+
position: relative;
|
|
34
|
+
}*/
|
|
35
|
+
/*.image {
|
|
36
|
+
@include size-medium-image-mixins.box;
|
|
37
|
+
|
|
38
|
+
position: absolute;
|
|
39
|
+
inset: 0;
|
|
40
|
+
background-position: center;
|
|
41
|
+
background-size: cover;
|
|
42
|
+
}*/
|
|
43
|
+
/*.action {
|
|
44
|
+
@include size-medium-action-mixins.box;
|
|
45
|
+
@include size-medium-action-mixins.sizing;
|
|
46
|
+
}*/
|
|
47
|
+
}
|
|
48
|
+
:host([size=medium]) > *:not(:last-child) {
|
|
49
|
+
margin-bottom: calc(var(--scw-spacing-1) * 0.8);
|
|
50
|
+
--margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
|
|
51
|
+
}
|
|
52
|
+
:host([size=medium]) .image-box {
|
|
53
|
+
height: 161px;
|
|
54
|
+
}
|
|
55
|
+
:host([size=medium]) .description {
|
|
56
|
+
text-align: LEFT;
|
|
57
|
+
font: var(--scw-type-text-font);
|
|
58
|
+
color: var(--scw-color-grey-02);
|
|
59
|
+
align-self: stretch;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:host([size=small]) {
|
|
63
|
+
display: block;
|
|
64
|
+
background-color: rgba(0, 0, 0, 0);
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-flow: column nowrap;
|
|
67
|
+
justify-content: flex-start;
|
|
68
|
+
align-items: flex-start;
|
|
69
|
+
padding-left: 0px;
|
|
70
|
+
padding-right: 0px;
|
|
71
|
+
padding-top: 0px;
|
|
72
|
+
padding-bottom: 0px;
|
|
73
|
+
/*.image-box {
|
|
74
|
+
width: 100%;
|
|
75
|
+
padding-bottom: 88.9473684211%;
|
|
76
|
+
position: relative;
|
|
77
|
+
}*/
|
|
78
|
+
/*.image {
|
|
79
|
+
@include size-small-image-mixins.box;
|
|
80
|
+
|
|
81
|
+
position: absolute;
|
|
82
|
+
inset: 0;
|
|
83
|
+
background-position: center;
|
|
84
|
+
background-size: cover;
|
|
85
|
+
}*/
|
|
86
|
+
}
|
|
87
|
+
:host([size=small]) > *:not(:last-child) {
|
|
88
|
+
margin-bottom: calc(var(--scw-spacing-1) * 0.8);
|
|
89
|
+
--margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
|
|
90
|
+
}
|
|
91
|
+
:host([size=small]) .image-box {
|
|
92
|
+
height: 169px;
|
|
93
|
+
}
|
|
94
|
+
:host([size=small]) .description {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
:host([size=small]) .action {
|
|
98
|
+
display: none;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host .super-heading.mortgage {
|
|
102
|
+
text-align: LEFT;
|
|
103
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
104
|
+
color: var(--scw-color-04, var(--scw-color-mortgage-04));
|
|
105
|
+
align-self: stretch;
|
|
106
|
+
}
|
|
107
|
+
:host .super-heading.savings {
|
|
108
|
+
text-align: LEFT;
|
|
109
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
110
|
+
color: var(--scw-color-04, var(--scw-color-savings-04));
|
|
111
|
+
align-self: stretch;
|
|
112
|
+
}
|
|
113
|
+
:host .super-heading.student {
|
|
114
|
+
text-align: LEFT;
|
|
115
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
116
|
+
color: var(--scw-color-04, var(--scw-color-student-04));
|
|
117
|
+
align-self: stretch;
|
|
118
|
+
}
|
|
119
|
+
:host .super-heading.investments {
|
|
120
|
+
text-align: LEFT;
|
|
121
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
122
|
+
color: var(--scw-color-04, var(--scw-color-investments-04));
|
|
123
|
+
align-self: stretch;
|
|
124
|
+
}
|
|
125
|
+
:host .super-heading.checking {
|
|
126
|
+
text-align: LEFT;
|
|
127
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
128
|
+
color: var(--scw-color-04, var(--scw-color-checking-04));
|
|
129
|
+
align-self: stretch;
|
|
130
|
+
}
|
|
131
|
+
:host .super-heading.credit-cards {
|
|
132
|
+
text-align: LEFT;
|
|
133
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
134
|
+
color: var(--scw-color-04, var(--scw-color-credit-cards-04));
|
|
135
|
+
align-self: stretch;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
:host {
|
|
139
|
+
display: block;
|
|
140
|
+
background-color: var(--scw-color, rgba(0, 0, 0, 0));
|
|
141
|
+
display: flex;
|
|
142
|
+
flex-flow: column nowrap;
|
|
143
|
+
justify-content: flex-start;
|
|
144
|
+
align-items: flex-start;
|
|
145
|
+
padding-left: 0px;
|
|
146
|
+
padding-right: 0px;
|
|
147
|
+
padding-top: 0px;
|
|
148
|
+
padding-bottom: 0px;
|
|
149
|
+
/*.image {
|
|
150
|
+
@include default-image-mixins.box;
|
|
151
|
+
|
|
152
|
+
position: absolute;
|
|
153
|
+
inset: 0;
|
|
154
|
+
background-position: center;
|
|
155
|
+
background-size: cover;
|
|
156
|
+
}*/
|
|
157
|
+
}
|
|
158
|
+
:host > *:not(:last-child) {
|
|
159
|
+
margin-bottom: calc(var(--scw-spacing-1) * 0.8);
|
|
160
|
+
--margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
|
|
161
|
+
}
|
|
162
|
+
:host .image-box {
|
|
163
|
+
background-color: var(--scw-color-09, var(--scw-color-grey-09));
|
|
164
|
+
border-radius: 10px 10px 10px 10px;
|
|
165
|
+
align-self: stretch;
|
|
166
|
+
flex: 1;
|
|
167
|
+
flex: initial;
|
|
168
|
+
overflow: hidden;
|
|
169
|
+
height: 345px;
|
|
170
|
+
}
|
|
171
|
+
:host .heading {
|
|
172
|
+
background-color: rgba(0, 0, 0, 0);
|
|
173
|
+
align-self: stretch;
|
|
174
|
+
}
|
|
175
|
+
:host .super-heading {
|
|
176
|
+
text-align: LEFT;
|
|
177
|
+
font: var(--scw-type-text-bold-condensed-font);
|
|
178
|
+
color: var(--scw-color-03, var(--scw-color-primary-03));
|
|
179
|
+
align-self: stretch;
|
|
180
|
+
}
|
|
181
|
+
:host .description {
|
|
182
|
+
text-align: LEFT;
|
|
183
|
+
font: var(--scw-type-text-06-font);
|
|
184
|
+
color: var(--scw-color-02, var(--scw-color-grey-02));
|
|
185
|
+
align-self: stretch;
|
|
186
|
+
}
|
|
187
|
+
:host .action {
|
|
188
|
+
width: 83px;
|
|
189
|
+
height: 32px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:host([action=none]) {
|
|
193
|
+
pointer-events: none;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
:host([action=whole]) {
|
|
197
|
+
pointer-events: all;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
:host([action=whole]:hover) {
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
:host([action=whole]:focus-visible) {
|
|
205
|
+
outline: none;
|
|
206
|
+
box-shadow: var(--scw-effect-focus-shadow);
|
|
207
|
+
border-radius: 10px 10px 4px 4px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
:host([action=link]) {
|
|
211
|
+
pointer-events: none;
|
|
212
|
+
}
|
|
213
|
+
:host([action=link]) scw-link {
|
|
214
|
+
pointer-events: all;
|
|
215
|
+
}`;var t=class extends c{constructor(){super();this.preload=!1;this.size="large";this.action="none";this.element="card",this.clickHandler=this.clickHandler.bind(this);let o=g();this.headerNodeName=r(`scw-${"heading"}${o}`),this.imageNodeName=r(`scw-${"image"}${o}`),this.linkNodeName=r(`scw-${"link"}${o}`)}static get styles(){return[super.styles,p]}parseAndValidateLightDom(){d(this),super.parseAndValidateLightDom()}clickHandler(o){o.stopPropagation(),this.click()}warn(o){this.heading=`error: ${o}`,l.prototype.warn.call(this,o)}renderImage(){if((this.src||this.srcset)&&this.alt)return s`
|
|
216
|
+
<scw-image
|
|
217
|
+
class="image-box"
|
|
218
|
+
src="${n(this.src)}"
|
|
219
|
+
srcset="${n(this.srcset)}"
|
|
220
|
+
alt="${this.alt}"
|
|
221
|
+
preload="${n(this.preload?"true":void 0)}"
|
|
222
|
+
object-fit="cover">
|
|
223
|
+
</scw-image>
|
|
224
|
+
`}renderButton(){return this.action==="link"?s`
|
|
225
|
+
<scw-link
|
|
226
|
+
aria-label="${this.linkLabel?this.linkLabel:"no label"}"
|
|
227
|
+
@click="${this.clickHandler}">
|
|
228
|
+
</scw-link>`:null}getSizeStringForHeader(){switch(this.size){case"large":return"h1";case"medium":return"h2";case"small":return"h3"}}renderBody(){return s`
|
|
229
|
+
${this.renderImage()}
|
|
230
|
+
${this.superHeading?s`
|
|
231
|
+
<div class="super-heading">
|
|
232
|
+
${this.superHeading}
|
|
233
|
+
</div>`:""}
|
|
234
|
+
<scw-heading
|
|
235
|
+
style="--scw-color-04: var( --scw-color-grey-02 );"
|
|
236
|
+
dynamic class="heading"
|
|
237
|
+
aria-label="${n(this.heading)}"
|
|
238
|
+
size="${this.getSizeStringForHeader()}">
|
|
239
|
+
</scw-heading>
|
|
240
|
+
${this.description?s`
|
|
241
|
+
<div class="description">
|
|
242
|
+
${this.description}
|
|
243
|
+
</div>`:""}`}render(){return this.action==="whole"?this.renderBody():s`
|
|
244
|
+
${this.renderBody()}
|
|
245
|
+
${this.renderButton()}`}};e([i()],t.prototype,"src",2),e([i()],t.prototype,"srcset",2),e([i()],t.prototype,"alt",2),e([i()],t.prototype,"heading",2),e([i()],t.prototype,"superHeading",2),e([i()],t.prototype,"description",2),e([i()],t.prototype,"linkLabel",2),e([i({type:Boolean})],t.prototype,"preload",2),e([i({type:String,reflect:!0})],t.prototype,"size",2),e([i({type:String,reflect:!0})],t.prototype,"action",2);export{t as a};
|
|
246
|
+
//# sourceMappingURL=chunk.6UC46GFP.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-card/scss/scw-card.scss", "../../src/scw-card/ScwCard.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n /* scw element */\n position: relative;\n box-sizing: border-box;\n --margin-right: initial;\n --margin-bottom: initial;\n --gap-h-int: initial;\n --gap-v-int: initial;\n margin-right: var(--margin-right, var(--gap-h-int, initial));\n margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));\n display: block;\n}\n\n:host([warning]) {\n outline: 2px solid red !important;\n}\n\n:host([size=medium]) {\n display: block;\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image-box {\n width: 100%;\n padding-bottom: 38.8888888889%;\n position: relative;\n }*/\n /*.image {\n @include size-medium-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n /*.action {\n @include size-medium-action-mixins.box;\n @include size-medium-action-mixins.sizing;\n }*/\n}\n:host([size=medium]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=medium]) .image-box {\n height: 161px;\n}\n:host([size=medium]) .description {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-grey-02);\n align-self: stretch;\n}\n\n:host([size=small]) {\n display: block;\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image-box {\n width: 100%;\n padding-bottom: 88.9473684211%;\n position: relative;\n }*/\n /*.image {\n @include size-small-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n}\n:host([size=small]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=small]) .image-box {\n height: 169px;\n}\n:host([size=small]) .description {\n display: none;\n}\n:host([size=small]) .action {\n display: none;\n}\n\n:host .super-heading.mortgage {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-mortgage-04));\n align-self: stretch;\n}\n:host .super-heading.savings {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-savings-04));\n align-self: stretch;\n}\n:host .super-heading.student {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-student-04));\n align-self: stretch;\n}\n:host .super-heading.investments {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-investments-04));\n align-self: stretch;\n}\n:host .super-heading.checking {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-checking-04));\n align-self: stretch;\n}\n:host .super-heading.credit-cards {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-credit-cards-04));\n align-self: stretch;\n}\n\n:host {\n display: block;\n background-color: var(--scw-color, rgba(0, 0, 0, 0));\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image {\n @include default-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n}\n:host > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host .image-box {\n background-color: var(--scw-color-09, var(--scw-color-grey-09));\n border-radius: 10px 10px 10px 10px;\n align-self: stretch;\n flex: 1;\n flex: initial;\n overflow: hidden;\n height: 345px;\n}\n:host .heading {\n background-color: rgba(0, 0, 0, 0);\n align-self: stretch;\n}\n:host .super-heading {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-03, var(--scw-color-primary-03));\n align-self: stretch;\n}\n:host .description {\n text-align: LEFT;\n font: var(--scw-type-text-06-font);\n color: var(--scw-color-02, var(--scw-color-grey-02));\n align-self: stretch;\n}\n:host .action {\n width: 83px;\n height: 32px;\n}\n\n:host([action=none]) {\n pointer-events: none;\n}\n\n:host([action=whole]) {\n pointer-events: all;\n}\n\n:host([action=whole]:hover) {\n cursor: pointer;\n}\n\n:host([action=whole]:focus-visible) {\n outline: none;\n box-shadow: var(--scw-effect-focus-shadow);\n border-radius: 10px 10px 4px 4px;\n}\n\n:host([action=link]) {\n pointer-events: none;\n}\n:host([action=link]) scw-link {\n pointer-events: all;\n}`;\n", "import {property} from 'lit/decorators.js';\nimport {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport styles from './scss/scw-card.scss';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {ScwCardSizes, ScwCardActions} from './scw-card-enums';\nimport parseLightDomCard from './scw-card-light-dom';\nimport ScwLinkBase from '../scw-link-base/ScwLinkBase';\nimport {Components} from '../utils/enums/Components';\nimport getSuffix from '../utils/suffix';\nimport {ScwHeadingSizes} from '../scw-heading/scw-heading-enums';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n *\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p />\"]\n The parts of scw-card are configured via nested html elements.\n img defines the image, heading the main heading, sup the category heading,\n and p the descriptive text. Only headings is required (with src, srcset,\n and alt attributes).\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p /><a />\"]\n Adding an anchor will show a link.\n * @slot [default=\"<a><img src alt /><h1, h2, h3 /><sup /><p /></a>\"]\n Wrapping the entire content in an anchor will make it interactive\n */\nexport default class ScwCard extends ScwLinkBase {\n /**\n * styles\n */\n static get styles() {\n return [\n super.styles,\n styles,\n ];\n }\n\n // ============== ScwCard ====================================================\n /** (ScwCard) The src of the image within the card */\n @property() src: string | undefined;\n\n /** (ScwCard) The srcset of the image within the card */\n @property() srcset: string | undefined;\n\n /** (ScwCard) Alternative description of the image. */\n @property() alt: string | undefined;\n\n /** (ScwCard) Main title or header of the card (determined by\n * <h1, h2, h3> content) */\n @property() heading: string | undefined;\n\n /** (ScwCard) Super title, describing a category or area pertaining to title\n * (determined by <sup> content) */\n @property() superHeading: string | undefined;\n\n /** (ScwCard) Fuller description of what the card is about (determined by\n * <p> content) */\n @property() description: string | undefined;\n\n /** (ScwCard) Label on the link */\n @property() linkLabel : string | undefined;\n\n /** (ScwCard) whether to preload image or not */\n @property({type: Boolean}) preload: boolean = false;\n\n // ----------- END STATES ----------------------------------------------------\n /** (ScwCard) Readonly - Size of the card. This\n * is determined by the nested html content (h1 = large,\n * h2 = medium, h3 = small). */\n @property({type: String, reflect: true})\n size: ScwCardSizes = ScwCardSizes.large;\n\n /** (ScwCard) Readonly - The type of action (whole card, link, or none).\n * This is determined by the use of an anchor tag. */\n @property({type: String, reflect: true})\n action: ScwCardActions = ScwCardActions.none;\n\n /** scw-header with versioning suffix */\n headerNodeName : any;\n\n /** scw-image with versioning suffix */\n imageNodeName : any;\n\n /** scw-link with versioning suffix */\n linkNodeName : any;\n\n /**\n * Constructor\n */\n constructor() {\n super();\n this.element = Components.card;\n this.clickHandler = this.clickHandler.bind(this);\n\n const suffix = getSuffix();\n this.headerNodeName = unsafeStatic(`scw-${Components.heading}${suffix}`);\n this.imageNodeName = unsafeStatic(`scw-${Components.image}${suffix}`);\n this.linkNodeName = unsafeStatic(`scw-${Components.link}${suffix}`);\n }\n\n /** parseAndValidateLightDom, just adding local parsing and validation */\n parseAndValidateLightDom() {\n parseLightDomCard(this);\n super.parseAndValidateLightDom();\n }\n\n /**\n * Handle click event from link so it doesn't trigger twice\n * @param {Event} evt\n */\n clickHandler(evt : Event) {\n evt.stopPropagation();\n this.click();\n }\n\n /**\n * change the main heading to be the error.\n * @param {string} message describing warning\n */\n warn( message: string ) {\n this.heading = `error: ${message}`;\n ScwComponent.prototype.warn.call(this, message );\n }\n\n /**\n * Render image area\n * @return {object} component DOM\n */\n renderImage() {\n if (\n ( this.src || this.srcset ) &&\n this.alt ) {\n return html`\n <scw-image\n class=\"image-box\"\n src=\"${ifDefined(this.src)}\"\n srcset=\"${ifDefined(this.srcset)}\"\n alt=\"${this.alt}\"\n preload=\"${ifDefined(this.preload ? 'true' : undefined)}\"\n object-fit=\"cover\">\n </scw-image>\n `;\n }\n }\n\n /**\n * Render link area\n * @return {object} component DOM\n */\n renderButton() {\n if ( this.action === ScwCardActions.link) {\n return html`\n <scw-link\n aria-label=\"${this.linkLabel ? this.linkLabel : 'no label'}\" \n @click=\"${this.clickHandler}\">\n </scw-link>`;\n }\n return null;\n }\n\n /**\n * get string to use in the size attribute of scw-header\n * @return {string}\n */\n getSizeStringForHeader() {\n switch (this.size) {\n case ScwCardSizes.large:\n return 'h1';\n case ScwCardSizes.medium:\n return 'h2';\n case ScwCardSizes.small:\n return 'h3';\n }\n }\n\n /**\n * render body\n * @return {object} component DOM\n */\n renderBody() : object {\n return html`\n ${this.renderImage()}\n ${this.superHeading ?\n html`\n <div class=\"super-heading\">\n ${this.superHeading}\n </div>` : ''\n }\n <scw-heading\n style=\"--scw-color-04: var( --scw-color-grey-02 );\"\n dynamic class=\"heading\"\n aria-label=\"${ifDefined(this.heading)}\"\n size=\"${this.getSizeStringForHeader() as ScwHeadingSizes}\">\n </scw-heading>\n ${this.description ?\n html`\n <div class=\"description\">\n ${this.description}\n </div>` : ''\n }`;\n }\n\n /**\n * render\n * @return {object} component DOM\n */\n render() : object {\n if (this.action === ScwCardActions.whole) {\n return this.renderBody();\n } else {\n return html`\n ${this.renderBody()}\n ${this.renderButton()}`;\n };\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import{a as f}from"./chunk.5HZ4WTGH.js";import{c as w,e as h,f as d}from"./chunk.ZS4C3T6Z.js";var{H:O}=d,v=r=>r===null||typeof r!="object"&&typeof r!="function";var y=(r,a)=>{var i,n;return a===void 0?((i=r)===null||i===void 0?void 0:i._$litType$)!==void 0:((n=r)===null||n===void 0?void 0:n._$litType$)===a};var g=r=>r.strings===void 0;var{R:_,D:P,j:A,H:m,Z:E}=d,$=(r,a,i={})=>{if(a._$litPart$!==void 0)throw Error("container already contains a live render");let n,s,o=[],e=document.createTreeWalker(a,NodeFilter.SHOW_COMMENT,null,!1),t;for(;(t=e.nextNode())!==null;){let l=t.data;if(l.startsWith("lit-part")){if(o.length===0&&n!==void 0)throw Error("there must be only one root part per container");s=T(r,t,o,i),n!=null||(n=s)}else if(l.startsWith("lit-node")){R(t,o,i);let c=t.parentElement;c.hasAttribute("defer-hydration")&&c.removeAttribute("defer-hydration")}else if(l.startsWith("/lit-part")){if(o.length===1&&s!==n)throw Error("internal error");s=C(t,s,o)}}console.assert(n!==void 0,"there should be exactly one root part in a render container"),a._$litPart$=n},T=(r,a,i,n)=>{let s,o;if(i.length===0)o=new m(a,null,void 0,n),s=r;else{let e=i[i.length-1];if(e.type==="template-instance")o=new m(a,null,e.instance,n),e.instance.v.push(o),s=e.result.values[e.instancePartIndex++],e.templatePartIndex++;else if(e.type==="iterable"){o=new m(a,null,e.part,n);let t=e.iterator.next();if(t.done)throw s=void 0,e.done=!0,Error("Unhandled shorter than expected iterable");s=t.value,e.part._$AH.push(o)}else o=new m(a,null,e.part,n)}if(s=A(o,s),s===w)i.push({part:o,type:"leaf"});else if(v(s))i.push({part:o,type:"leaf"}),o._$AH=s;else if(y(s)){let e="lit-part "+H(s);if(a.data!==e)throw Error("Hydration value mismatch: Unexpected TemplateResult rendered to part");{let t=m.prototype._$AC(s),l=new _(t,o);i.push({type:"template-instance",instance:l,part:o,templatePartIndex:0,instancePartIndex:0,result:s}),o._$AH=l}}else P(s)?(i.push({part:o,type:"iterable",value:s,iterator:s[Symbol.iterator](),done:!1}),o._$AH=[]):(i.push({part:o,type:"leaf"}),o._$AH=s==null?"":s);return o},C=(r,a,i)=>{if(a===void 0)throw Error("unbalanced part marker");a._$AB=r;let n=i.pop();if(n.type==="iterable"&&!n.iterator.next().done)throw Error("unexpected longer than expected iterable");if(i.length>0)return i[i.length-1].part},R=(r,a,i)=>{var n;let s=/lit-node (\d+)/.exec(r.data),o=parseInt(s[1]),e=(n=r.previousSibling)!==null&&n!==void 0?n:r.parentElement,t=a[a.length-1];if(t.type!=="template-instance")throw Error("internal error");{let l=t.instance;for(;;){let c=l._$AD.parts[t.templatePartIndex];if(c===void 0||c.type!==f.ATTRIBUTE&&c.type!==f.ELEMENT||c.index!==o)break;if(c.type===f.ATTRIBUTE){let p=new c.ctor(e,c.name,c.strings,t.instance,i),u=g(p)?t.result.values[t.instancePartIndex]:t.result.values,x=!(p.type===f.EVENT||p.type===f.PROPERTY);p._$AI(u,p,t.instancePartIndex,x),t.instancePartIndex+=c.strings.length-1,l.v.push(p)}else{let p=new E(e,t.instance,i);A(p,t.result.values[t.instancePartIndex++]),l.v.push(p)}t.templatePartIndex++}}},H=r=>{let a=new Uint32Array(2).fill(5381);for(let i of r.strings)for(let n=0;n<i.length;n++)a[n%2]=33*a[n%2]^i.charCodeAt(n);return btoa(String.fromCharCode(...new Uint8Array(a.buffer)))};globalThis.litElementHydrateSupport=({LitElement:r})=>{let a=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(r),"observedAttributes").get;Object.defineProperty(r,"observedAttributes",{get(){return[...a.call(this),"defer-hydration"]}});let i=r.prototype.attributeChangedCallback;r.prototype.attributeChangedCallback=function(e,t,l){e==="defer-hydration"&&l===null&&n.call(this),i.call(this,e,t,l)};let n=r.prototype.connectedCallback;r.prototype.connectedCallback=function(){this.hasAttribute("defer-hydration")||n.call(this)};let s=r.prototype.createRenderRoot;r.prototype.createRenderRoot=function(){return this.shadowRoot?(this._$AG=!0,this.shadowRoot):s.call(this)};let o=Object.getPrototypeOf(r.prototype).update;r.prototype.update=function(e){let t=this.render();o.call(this,e),this._$AG?(this._$AG=!1,$(t,this.renderRoot,this.renderOptions)):h(t,this.renderRoot,this.renderOptions)}};var b={},I;async function V(r={}){let{components:a=!1,suffix:i=!1}=r;I={suffix:i};let n=!a,s=i?`-${i}`:"",o=[];function e(l,c){o.push((async()=>{let p=`${l}${s}`;if(!b[p]){b[p]=!0;try{window.customElements.define(p,(await c).default)}catch(u){console.error(p,u)}}})())}function t(l){if(n)return!0;if(Array.isArray(a))return a?a.includes(l):!1}return t("scw-component")&&e("scw-component",import("../scw-component/ScwComponent.js")),t("scw-form-component")&&e("scw-form-component",import("../scw-form-component/scw-form-component.js")),t("scw-card")&&e("scw-card",import("../scw-card/ScwCard.js")),t("scw-input-field")&&e("scw-input-field",import("../scw-input-field/scw-input-field.js")),t("scw-input-layout")&&e("scw-input-layout",import("../scw-input-layout/scw-input-layout.js")),t("scw-link")&&e("scw-link",import("../scw-link/ScwLink.js")),t("scw-button")&&e("scw-button",import("../scw-button/ScwButton.js")),t("scw-menu")&&e("scw-menu",import("../scw-menu/ScwMenu.js")),t("scw-menu-item")&&e("scw-menu-item",import("../scw-menu-item/ScwMenuItem.js")),t("scw-icon")&&e("scw-icon",import("../scw-icon/ScwIcon.js")),t("scw-heading")&&e("scw-heading",import("../scw-heading/ScwHeading.js")),t("scw-image")&&e("scw-image",import("../scw-image/ScwImage.js")),t("scw-input")&&e("scw-input",import("../scw-input/scw-input.js")),t("scw-single-input")&&e("scw-single-input",import("../scw-single-input/scw-single-input.js")),t("scw-single-input-layout")&&e("scw-single-input-layout",import("../scw-single-input-layout/scw-single-input-layout.js")),t("scw-responsive")&&e("scw-responsive",import("../scw-responsive/scw-responsive.js")),t("scw-validation")&&e("scw-validation",import("../scw-validation/scw-validation.js")),t("scw-validate")&&e("scw-validate",import("../scw-validate/scw-validate.js")),t("scw-flex-h-component")&&e("scw-flex-h-component",import("../scw-flex-h-component/scw-flex-h-component.js")),t("scw-flex-v-component")&&e("scw-flex-v-component",import("../scw-flex-v-component/scw-flex-v-component.js")),t("scw-stack-component")&&e("scw-stack-component",import("../scw-stack-component/scw-stack-component.js")),t("scw-layout-component")&&e("scw-layout-component",import("../scw-layout-component/scw-layout-component.js")),t("scw-element-component")&&e("scw-element-component",import("../scw-element-component/scw-element-component.js")),t("scw-center-component")&&e("scw-center-component",import("../scw-center-component/ScwCenterComponent.js")),t("scw-float-component")&&e("scw-float-component",import("../scw-float-component/scw-float-component.js")),t("scw-pane-component")&&e("scw-pane-component",import("../scw-pane-component/scw-pane-component.js")),t("scw-form")&&e("scw-form",import("../scw-form/scw-form.js")),t("scw-page-alert")&&e("scw-page-alert",import("../scw-page-alert/scw-page-alert.js")),t("scw-link-base")&&e("scw-link-base",import("../scw-link-base/ScwLinkBase.js")),t("scw-textarea")&&e("scw-textarea",import("../scw-textarea/scw-textarea.js")),t("scw-select")&&e("scw-select",import("../scw-select/scw-select.js")),t("scw-alert")&&e("scw-alert",import("../scw-alert/ScwAlert.js")),Promise.all(o)}export{g as a,I as b,V as c};
|
|
2
|
+
/**
|
|
3
|
+
* @license
|
|
4
|
+
* Copyright 2017 Google LLC
|
|
5
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* @license
|
|
9
|
+
* Copyright 2019 Google LLC
|
|
10
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* @license
|
|
14
|
+
* Copyright 2020 Google LLC
|
|
15
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
|
+
*/
|
|
17
|
+
//# sourceMappingURL=chunk.ASPERYN6.js.map
|