@getflip/swirl-components 0.397.2 → 0.399.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/components.json +37 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-search.cjs.entry.js +3 -2
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +3 -1
- package/dist/collection/components/swirl-search/swirl-search.css +4 -0
- package/dist/collection/components/swirl-search/swirl-search.js +23 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-resource-list-item2.js +1 -1
- package/dist/components/swirl-search.js +5 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-app-layout_5.entry.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-search.entry.js +3 -2
- package/dist/swirl-components/p-68f0deb0.entry.js +1 -0
- package/dist/swirl-components/{p-b9ee3e5a.entry.js → p-d93d2e25.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-search/swirl-search.d.ts +2 -1
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/vscode-data.json +7 -0
- package/dist/swirl-components/p-fbfae965.entry.js +0 -1
|
@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
|
|
|
5
5
|
var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
|
|
6
6
|
require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
|
|
8
|
+
const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
|
|
9
9
|
|
|
10
10
|
const SwirlSearch = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -17,6 +17,7 @@ const SwirlSearch = class {
|
|
|
17
17
|
this.clearButtonLabel = "Clear search term";
|
|
18
18
|
this.placeholder = "Search …";
|
|
19
19
|
this.variant = "filled";
|
|
20
|
+
this.clearable = true;
|
|
20
21
|
this.mediaQueryUnsubscribe = () => { };
|
|
21
22
|
this.clear = () => {
|
|
22
23
|
this.input.value = "";
|
|
@@ -67,7 +68,7 @@ const SwirlSearch = class {
|
|
|
67
68
|
const className = index$1.classnames("search", `search--variant-${this.variant}`, {
|
|
68
69
|
"search--disabled": this.disabled,
|
|
69
70
|
});
|
|
70
|
-
return (index.h(index.Host, { key: '
|
|
71
|
+
return (index.h(index.Host, { key: 'a20b59680e46d8c0db48dc4e4219c9880660d693' }, index.h("span", { key: '3227a1ae642458cd4d011a6f51e7146ed60e9d90', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: '6c7977231b43a3fa04eac25a7b0f6d786cc908bd', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '773474215fde7a49dea748501fd74e99b25934bb', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (index.h("button", { key: '24eefaf684a49e976232cb422b3f6fba2fc368cd', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", { key: '10c3dda4135ef1555935ee8d4a2dd17fa42d52de' }))))));
|
|
71
72
|
}
|
|
72
73
|
};
|
|
73
74
|
SwirlSearch.style = swirlSearchCss;
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.resource-list-item--compact .resource-list-item__label-container {
|
|
112
|
-
min-height:
|
|
112
|
+
min-height: 2rem;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
@media (min-width: 768px) {
|
|
@@ -156,6 +156,7 @@
|
|
|
156
156
|
opacity: 1;
|
|
157
157
|
position: static;
|
|
158
158
|
transform: none;
|
|
159
|
+
margin: calc(-1 * var(--s-space-2)) 0;
|
|
159
160
|
}
|
|
160
161
|
|
|
161
162
|
.resource-list-item--show-control-on-focus:hover .resource-list-item__meta, .resource-list-item--show-control-on-focus:focus .resource-list-item__meta, .resource-list-item--show-control-on-focus:focus-within .resource-list-item__meta {
|
|
@@ -263,6 +264,7 @@
|
|
|
263
264
|
.resource-list-item__label-container {
|
|
264
265
|
position: relative;
|
|
265
266
|
display: flex;
|
|
267
|
+
height: 100%;
|
|
266
268
|
min-width: 0;
|
|
267
269
|
min-height: 3rem;
|
|
268
270
|
padding-right: var(--s-space-16);
|
|
@@ -6,6 +6,7 @@ export class SwirlSearch {
|
|
|
6
6
|
this.clearButtonLabel = "Clear search term";
|
|
7
7
|
this.placeholder = "Search …";
|
|
8
8
|
this.variant = "filled";
|
|
9
|
+
this.clearable = true;
|
|
9
10
|
this.mediaQueryUnsubscribe = () => { };
|
|
10
11
|
this.clear = () => {
|
|
11
12
|
this.input.value = "";
|
|
@@ -56,7 +57,7 @@ export class SwirlSearch {
|
|
|
56
57
|
const className = classnames("search", `search--variant-${this.variant}`, {
|
|
57
58
|
"search--disabled": this.disabled,
|
|
58
59
|
});
|
|
59
|
-
return (h(Host, { key: '
|
|
60
|
+
return (h(Host, { key: 'a20b59680e46d8c0db48dc4e4219c9880660d693' }, h("span", { key: '3227a1ae642458cd4d011a6f51e7146ed60e9d90', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '6c7977231b43a3fa04eac25a7b0f6d786cc908bd', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '773474215fde7a49dea748501fd74e99b25934bb', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '24eefaf684a49e976232cb422b3f6fba2fc368cd', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '10c3dda4135ef1555935ee8d4a2dd17fa42d52de' }))))));
|
|
60
61
|
}
|
|
61
62
|
static get is() { return "swirl-search"; }
|
|
62
63
|
static get encapsulation() { return "scoped"; }
|
|
@@ -232,7 +233,7 @@ export class SwirlSearch {
|
|
|
232
233
|
"mutable": false,
|
|
233
234
|
"complexType": {
|
|
234
235
|
"original": "SwirlSearchVariant",
|
|
235
|
-
"resolved": "\"filled\" | \"outline\"",
|
|
236
|
+
"resolved": "\"filled\" | \"ghost\" | \"outline\"",
|
|
236
237
|
"references": {
|
|
237
238
|
"SwirlSearchVariant": {
|
|
238
239
|
"location": "local",
|
|
@@ -251,6 +252,26 @@ export class SwirlSearch {
|
|
|
251
252
|
"setter": false,
|
|
252
253
|
"reflect": false,
|
|
253
254
|
"defaultValue": "\"filled\""
|
|
255
|
+
},
|
|
256
|
+
"clearable": {
|
|
257
|
+
"type": "boolean",
|
|
258
|
+
"attribute": "clearable",
|
|
259
|
+
"mutable": false,
|
|
260
|
+
"complexType": {
|
|
261
|
+
"original": "boolean",
|
|
262
|
+
"resolved": "boolean",
|
|
263
|
+
"references": {}
|
|
264
|
+
},
|
|
265
|
+
"required": false,
|
|
266
|
+
"optional": true,
|
|
267
|
+
"docs": {
|
|
268
|
+
"tags": [],
|
|
269
|
+
"text": ""
|
|
270
|
+
},
|
|
271
|
+
"getter": false,
|
|
272
|
+
"setter": false,
|
|
273
|
+
"reflect": false,
|
|
274
|
+
"defaultValue": "true"
|
|
254
275
|
}
|
|
255
276
|
};
|
|
256
277
|
}
|