@salesforcedevs/arch-components 1.20.17-alpha6 → 1.20.17-alpha8

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.
@@ -1,60 +0,0 @@
1
- export type Pattern = {
2
- Name?: string;
3
- Description: string;
4
- Example?: string;
5
- Weight?: number | null;
6
- LastUpdated?: string;
7
- Location: string;
8
- Capability: string;
9
- Behavior: string;
10
- Consideration: string;
11
- ConsiderationURL: string;
12
- Dimension: string;
13
- DimensionURL: string;
14
- Mirror?: Pattern;
15
- Tools?: Tool[];
16
- Resources?: Resource[];
17
- ProductArea: string;
18
- }
19
-
20
- export type Location = {
21
- Name: string;
22
- isDisabled: boolean;
23
- }
24
-
25
- export type Behavior = {
26
- Capability: string;
27
- Name: string;
28
- Weight: number;
29
- Dimensions: Dimension[];
30
- }
31
-
32
- export type Dimension = {
33
- Behavior: string;
34
- Name: string;
35
- Weight: number;
36
- isDisabled: boolean;
37
- }
38
-
39
- export type Tool = {
40
- Name: string;
41
- Description: string;
42
- URL: string;
43
- }
44
-
45
- export type Resource = {
46
- Name: string;
47
- Description: string;
48
- URL: string;
49
- }
50
-
51
- export type Filter = {
52
- Type: string;
53
- Name: string;
54
- }
55
-
56
- export type VersionInfo = {
57
- Number: string;
58
- Name: string;
59
- URL: string;
60
- }
@@ -1,358 +0,0 @@
1
- @import 'tds/reset';
2
-
3
- :host {
4
- font-size: var(--tds-font-size-md);
5
- }
6
-
7
- .filter-header {
8
- display: flex;
9
- align-items: center;
10
- justify-content: space-between;
11
- }
12
-
13
- .filter-title {
14
- display: inline-block;
15
- margin-right: var(--tds-spacing-8);
16
- }
17
-
18
- .filter-header h2 {
19
- font-size: var(--tds-font-size-lg);
20
- }
21
-
22
- .filter-form {
23
- margin-bottom: var(--tds-spacing-8);
24
- display: flex;
25
- flex-wrap: wrap;
26
- justify-content: space-between;
27
- }
28
-
29
- .filter-form > * {
30
- margin-right: var(--tds-spacing-4);
31
- margin-left: var(--tds-spacing-4);
32
- }
33
-
34
- .filter-form tds-select {
35
- flex: 1;
36
- }
37
-
38
- .tds-select {
39
- width: 60%;
40
- box-sizing: border-box;
41
- }
42
-
43
- .search-input {
44
- width: 40%;
45
- box-sizing: border-box;
46
- }
47
-
48
- .search-input__wrapper {
49
- align-items: stretch;
50
- display: flex;
51
- position: relative;
52
- }
53
-
54
- .search-input__label {
55
- overflow-wrap: break-word;
56
- word-wrap: break-word;
57
- hyphens: auto;
58
- display: block;
59
- padding-right: var(--tds-spacing-2);
60
- padding-top: var(--tds-spacing-2);
61
- color: var(--tds-color-meteorite);
62
- font-size: var(--tds-font-size-xs);
63
- margin-bottom: var(--tds-spacing-2);
64
- }
65
-
66
- .search-input__input {
67
- border-radius: var(--tds-radius-md);
68
- border: 1px solid var(--tds-color-fog);
69
- color: var(--tds-color-black);
70
- flex: 1;
71
- font-family: inherit;
72
- font-size: var(--tds-font-size-md);
73
- line-height: 1.875;
74
- overflow: hidden;
75
- padding: 0.4rem 0;
76
- padding-left: var(--tds-spacing-8);
77
- position: relative;
78
- text-overflow: ellipsis;
79
- transition: border 0.1s linear, background-color 0.1s linear;
80
- white-space: nowrap;
81
- }
82
-
83
- .search-input__icon {
84
- color: var(--tds-color-granite);
85
- left: 10px;
86
- position: absolute;
87
- top: 13px;
88
- z-index: 1;
89
- }
90
-
91
- .table-summary {
92
- display: flex;
93
- justify-content: space-between;
94
- align-items: center;
95
- margin-bottom: var(--tds-spacing-4);
96
- }
97
- .table-summary > div {
98
- margin-bottom: var(--tds-spacing-4);
99
- }
100
-
101
- .table-summary .page-size-controls,
102
- .table-summary .collapse-buttons {
103
- flex-basis: 25%;
104
- }
105
- .table-summary .page-size-controls {
106
- display: flex;
107
- align-items: center;
108
- }
109
- .table-summary .page-size-controls div {
110
- margin-right: 0.5rem;
111
- color: var(--tds-color-meteorite);
112
- }
113
- .table-summary .collapse-buttons {
114
- text-align: right;
115
- }
116
- .table-summary .collapse-buttons button:first-child {
117
- margin-right: 0.5rem;
118
- }
119
- .table-summary .collapse-buttons button:last-child {
120
- margin-left: 0.5rem;
121
- }
122
- .table-summary .filter-stats {
123
- text-align: center;
124
- color: var(--tds-color-meteorite);
125
- }
126
-
127
- table {
128
- width: 100%;
129
- margin: 0 auto;
130
- border-collapse: separate;
131
- border-spacing: 0;
132
- border-right: 1px solid #dddbda;
133
- border-left: 1px solid #dddbda;
134
- border-bottom: 1px solid #111111;
135
- vertical-align: middle;
136
- margin-bottom: var(--tds-spacing-8);
137
- }
138
-
139
- thead {
140
- display: table-header-group;
141
- border-color: inherit;
142
- }
143
-
144
- th {
145
- background-color: #ebf5ff;
146
- border-top: 1px solid #dddbda;
147
- border-bottom: 1px solid #111111;
148
- padding: 1rem;
149
- vertical-align: middle;
150
- }
151
-
152
- tr {
153
- display: table-row;
154
- vertical-align: middle;
155
- }
156
-
157
- tr:nth-child(even) td {
158
- background: #fafaf9;
159
- }
160
-
161
- tr td:first-child {
162
- border-left: 3px solid transparent;
163
- }
164
-
165
- tr td:last-child {
166
- border-right: 3px solid transparent;
167
- }
168
-
169
- tr:hover td {
170
- box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset;
171
- background: #fafaf9;
172
- }
173
-
174
- tr:hover td:first-child {
175
- border-left: 3px solid var(--tds-color-brand);
176
- }
177
-
178
- tr:hover td:last-child {
179
- border-right: 3px solid var(--tds-color-brand);
180
- }
181
-
182
- td {
183
- padding: 0.75rem 1rem;
184
- border-top: 1px solid #dddbda;
185
- border-bottom: 1px solid #dddbda;
186
- }
187
-
188
- .status {
189
- text-align: center;
190
- }
191
-
192
- .feature a {
193
- color: var(--tds-color-brand);
194
- text-decoration: none;
195
- }
196
-
197
- .feature a:hover {
198
- text-decoration: underline;
199
- }
200
-
201
- .feature p {
202
- margin-bottom: var(--tds-spacing-2);
203
- }
204
-
205
- .feature .inline {
206
- display: flex;
207
- }
208
-
209
- .feature .inline h4 {
210
- padding-right: var(--tds-spacing-4);
211
- }
212
-
213
- td.empty-table {
214
- height: 20rem;
215
- text-align: center;
216
- pointer-events: none;
217
- }
218
-
219
- td.empty-table tds-spinner {
220
- display: inline-block;
221
- }
222
-
223
- button.link {
224
- background: none;
225
- border-width: 0;
226
- text-decoration: underline;
227
- cursor: pointer;
228
- }
229
-
230
- .pagination-controls {
231
- display: flex;
232
- justify-content: center;
233
- margin-bottom: var(--tds-spacing-8);
234
- }
235
-
236
- .pagination-controls tds-button {
237
- padding: 0 1rem;
238
- }
239
-
240
- .safe-harbor {
241
- border-radius: 10px;
242
- border: 1px solid gray;
243
- padding: 20px;
244
- margin-bottom: 20px;
245
- }
246
-
247
- .safe-harbor img {
248
- margin-right: 10px;
249
- float: left;
250
- }
251
-
252
- @media screen and (max-width: 48rem) {
253
- .filter-header {
254
- flex-direction: column-reverse;
255
- }
256
-
257
- .filter-header div {
258
- width: 100%;
259
- display: flex;
260
- justify-content: space-between;
261
- align-items: center;
262
- }
263
-
264
- .filter-header sa-social-share {
265
- margin-bottom: var(--tds-spacing-6);
266
- }
267
-
268
- .table-summary {
269
- flex-direction: column;
270
- }
271
-
272
- .table-wrapper {
273
- overflow-x: scroll;
274
- }
275
- .docs-grid-container {
276
- position: relative;
277
- }
278
-
279
- .docs-action-bar {
280
- display: flex;
281
- justify-content: space-between;
282
- align-items: flex-end;
283
- padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
284
- }
285
-
286
- .docs-action-bar > .records-container {
287
- margin-right: auto;
288
- }
289
-
290
- .docs-action-bar .filters-container {
291
- display: flex;
292
- }
293
-
294
- .docs-action-bar .filters-container > *:not(:first-child),
295
- .docs-search-input {
296
- margin-left: var(--dx-g-spacing-sm);
297
- }
298
-
299
- .docs-search-input {
300
- --dx-c-input-width: 285px;
301
- }
302
-
303
- .docs-card {
304
- --dx-c-body-max-lines: 4;
305
- --dx-c-heading-max-lines: 2;
306
- }
307
-
308
- .pagination-container {
309
- max-width: fit-content;
310
- max-width: -moz-fit-content;
311
- margin: var(--dx-g-spacing-lg) auto;
312
- }
313
-
314
- @media screen and (max-width: 1024px) {
315
- .docs-card {
316
- --dx-c-body-max-lines: 3;
317
- }
318
- }
319
-
320
- @media screen and (max-width: 768px) {
321
- .docs-action-bar {
322
- flex-direction: column-reverse;
323
- width: 100%;
324
- padding: 0;
325
- }
326
-
327
- .docs-search-input {
328
- --dx-c-input-width: 100%;
329
-
330
- width: 100%;
331
- margin-bottom: var(--dx-g-spacing-md);
332
- }
333
-
334
- .docs-action-bar .records-container {
335
- transform: translateY(-100%);
336
- }
337
- }
338
-
339
- @media screen and (max-width: 600px) {
340
- .pagination-container {
341
- width: 100%;
342
- overflow: hidden;
343
- }
344
-
345
- .pagination-container > * {
346
- position: absolute;
347
- left: 50%;
348
- transform: translateX(-50%);
349
- }
350
- }
351
-
352
- @media screen and (max-width: 460px) {
353
- .docs-action-bar .records-container {
354
- transform: initial;
355
- padding: var(--dx-g-spacing-md) 0;
356
- }
357
- }
358
- }
@@ -1,65 +0,0 @@
1
- <template>
2
- <div class="filter-header">
3
- <div>
4
- <h2 class="filter-title">Search for {_searchTitle}</h2>
5
- <tds-button class="clear-filter" onclick={handleResetFiltersClick}
6
- >Clear filters</tds-button
7
- >
8
- </div>
9
- <sa-social-share title={socialTitle} url={shareUrl}></sa-social-share>
10
- </div>
11
- <div class="filter-form">
12
- <tds-select
13
- label={_filterLabel}
14
- value={_selectFilter}
15
- onchange={filterChange}
16
- >
17
- <option value="">- All {_filterLabel}s -</option>
18
- <template for:each={filterOptions} for:item="item">
19
- <option key={item.label} value={item.value}>
20
- {item.label}
21
- </option>
22
- </template>
23
- </tds-select>
24
-
25
- <template if:true={_showMetaFilter}>
26
- <tds-select
27
- label={_metaFilterLabel}
28
- value={_selectMetaFilter}
29
- onchange={metaFilterChange}
30
- >
31
- <option value="">- All {_metaFilterLabel}s -</option>
32
- <template for:each={metaFilterOptions} for:item="item">
33
- <option key={item.label} value={item.value}>
34
- {item.label}
35
- </option>
36
- </template>
37
- </tds-select>
38
- </template>
39
-
40
- <div class="search-input">
41
- <label class="search-input__label" for="search">Search</label>
42
- <div class="search-input__wrapper">
43
- <tds-icon
44
- class="search-input__icon"
45
- size="small"
46
- symbol="search"
47
- ></tds-icon>
48
- <input
49
- id="search"
50
- class="search-input__input"
51
- placeholder="Search..."
52
- icon-symbol="search"
53
- aria-label="Search..."
54
- value={_keywordFilter}
55
- oninput={keywordFilterChange}
56
- disabled={isLoading}
57
- />
58
- </div>
59
- </div>
60
- </div>
61
- <div role="region" aria-label="Gallery results" aria-live="polite">
62
- <tm-card-grid-a img-aspect="60%" img-type="full" items={filteredCards}>
63
- </tm-card-grid-a>
64
- </div>
65
- </template>