@gemeentenijmegen/web-components 0.0.2-alpha.54 → 0.0.2-alpha.55
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/nijmegen-search.js +24 -1
- package/package.json +3 -3
- package/src/search/search.js +23 -0
package/dist/nijmegen-search.js
CHANGED
|
@@ -28,12 +28,16 @@
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/* TODO: Enable ordering properties when the plugin supports logical CSS properties\n * https://github.com/hudochenkov/stylelint-order/pull/162 */\n/* stylelint-disable order/properties-alphabetical-order */\n.nijmegen-
|
|
31
|
+
var css_248z = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/* TODO: Enable ordering properties when the plugin supports logical CSS properties\n * https://github.com/hudochenkov/stylelint-order/pull/162 */\n/* stylelint-disable order/properties-alphabetical-order */\n.nijmegen-search {\n inline-size: var(--nijmegen-search-input-max-inline-size);\n max-inline-size: 100%;\n position: relative;\n}\n.nijmegen-search.nijmegen-search--full-width {\n inline-size: 100%;\n}\n\n.nijmegen-search__container {\n display: flex;\n gap: var(--nijmegen-search-input-column-gap);\n}\n.nijmegen-search__container .utrecht-button {\n max-block-size: 51px;\n min-block-size: 51px;\n}\n\n.nijmegen-search__input-holder {\n flex: 1;\n position: relative;\n}\n\n.nijmegen-search__search-button.nijmegen-search__search-button--dark {\n border-color: var(--nijmegen-search-input-button-border-color) !important;\n}\n@media (width < 576px) {\n .nijmegen-search__search-button svg {\n display: none;\n }\n}\n\n.nijmegen-search__clear-button {\n align-items: center;\n aspect-ratio: 1/1;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n height: 100%; /* stylelint-disable-line property-disallowed-list */\n justify-content: center;\n position: absolute;\n right: 0; /* stylelint-disable-line property-disallowed-list */\n top: 0; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__clear-button.nijmegen-search__clear-button--hide {\n display: none;\n}\n.nijmegen-search__clear-button svg {\n stroke: var(--nijmegen-interaction-color);\n}\n\n.nijmegen-search__input {\n background-color: var(--nijmegen-search-input-background-color);\n border-color: var(--nijmegen-search-input-border-color);\n border-radius: var(--nijmegen-search-input-border-radius);\n border-width: var(--nijmegen-search-input-border-width);\n box-sizing: border-box;\n color: var(--nijmegen-search-input-color);\n font-family: var(--nijmegen-search-input-font-family);\n font-size: var(--nijmegen-search-input-font-size);\n font-weight: var(--nijmegen-search-input-font-weight);\n line-height: var(--nijmegen-search-input-line-height);\n min-block-size: var(--nijmegen-search-input-min-block-size);\n padding-block-end: var(--nijmegen-search-input-padding-block-end);\n padding-block-start: var(--nijmegen-search-input-padding-block-start);\n padding-inline-end: var(--nijmegen-search-input-padding-inline-end);\n padding-inline-start: var(--nijmegen-search-input-padding-inline-start);\n width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__input:hover, .nijmegen-search__input.nijmegen-search__input--hover {\n background-color: var(--nijmegen-search-input-hover-background-color);\n border-color: var(--nijmegen-search-input-hover-border-color);\n color: var(--nijmegen-search-input-hover-color);\n}\n.nijmegen-search__input:focus, .nijmegen-search__input.nijmegen-search__input--focus {\n background-color: var(--nijmegen-search-input-focus-background-color);\n border-color: var(--nijmegen-search-input-focus-border-color);\n color: var(--nijmegen-search-input-focus-color);\n}\n.nijmegen-search__input:focus-visible, .nijmegen-search__input.nijmegen-search__input--focus {\n /* - The browser default focus ring should apply when these CSS custom properties are not set.\n * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n * can combine it with the focus ring box shadow.\n */\n --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);\n box-shadow: var(--_utrecht-focus-ring-box-shadow);\n outline-color: var(--utrecht-focus-outline-color, revert);\n outline-offset: var(--utrecht-focus-outline-offset, revert);\n outline-style: var(--utrecht-focus-outline-style, revert);\n outline-width: var(--utrecht-focus-outline-width, revert);\n z-index: 1;\n background-color: var(--nijmegen-search-input-focus-background-color);\n border-color: var(--nijmegen-search-input-focus-border-color);\n color: var(--nijmegen-search-input-focus-color);\n}\n.nijmegen-search__input:read-only, .nijmegen-search__input.nijmegen-search__input-read-only {\n background-color: var(--nijmegen-search-input-read-only-background-color);\n border-color: var(--nijmegen-search-input-read-only-border-color);\n color: var(--nijmegen-search-input-read-only-color);\n}\n.nijmegen-search__input.nijmegen-search__input--disabled {\n background-color: var(--nijmegen-search-input-disabled-background-color);\n border-color: var(--nijmegen-search-input-disabled-border-color);\n color: var(--nijmegen-search-input-disabled-color);\n cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n.nijmegen-search__input::placeholder {\n color: var(--nijmegen-search-input-placeholder-color);\n}\n\n.nijmegen-search__autocomplete-results {\n display: none;\n margin-block-start: var(--nijmegen-search-input-autocomplete-offset, 8px);\n position: absolute;\n top: var(--nijmegen-search-input-min-block-size); /* stylelint-disable-line property-disallowed-list */\n width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__autocomplete-results--show-results {\n display: block;\n}\n.nijmegen-search__autocomplete-results--static {\n position: static;\n}";
|
|
32
32
|
styleInject(css_248z);
|
|
33
33
|
|
|
34
34
|
var html = "<form class=\"nijmegen-search\" method=\"GET\" action=\"\" role=\"search\">\n <slot></slot>\n</form>\n";
|
|
35
35
|
|
|
36
36
|
class NijmegenSearch extends HTMLElement {
|
|
37
|
+
static get observedAttributes() {
|
|
38
|
+
return ['full'];
|
|
39
|
+
}
|
|
40
|
+
|
|
37
41
|
constructor() {
|
|
38
42
|
super();
|
|
39
43
|
const template = document.createElement('template');
|
|
@@ -53,12 +57,31 @@
|
|
|
53
57
|
const resultsList = this.querySelector('.nijmegen-listbox__list');
|
|
54
58
|
const resultsContainer = this.querySelector('.nijmegen-search__autocomplete-results');
|
|
55
59
|
|
|
60
|
+
this.#updateFullWidth();
|
|
61
|
+
|
|
56
62
|
this.#initializeSearch(input, clearButton);
|
|
57
63
|
if (resultsContainer && resultsContainer.classList.contains('nijmegen-search__autocomplete-results--example')) {
|
|
58
64
|
this.#initializeAutocomplete(input, clearButton, resultsList, resultsContainer);
|
|
59
65
|
}
|
|
60
66
|
}
|
|
61
67
|
|
|
68
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
69
|
+
if (name === 'full' && oldValue !== newValue) {
|
|
70
|
+
this.#updateFullWidth();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
#updateFullWidth() {
|
|
75
|
+
const form = this.shadowRoot.querySelector('.nijmegen-search');
|
|
76
|
+
if (form) {
|
|
77
|
+
if (this.hasAttribute('full')) {
|
|
78
|
+
form.classList.add('nijmegen-search--full-width');
|
|
79
|
+
} else {
|
|
80
|
+
form.classList.remove('nijmegen-search--full-width');
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
62
85
|
#initializeSearch(input, clearButton) {
|
|
63
86
|
if (input && clearButton) {
|
|
64
87
|
input.addEventListener('input', () => {
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.2-alpha.
|
|
2
|
+
"version": "0.0.2-alpha.55",
|
|
3
3
|
"author": "gemeente Nijmegen",
|
|
4
4
|
"description": "Web components for the gemeente Nijmegen design system",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
"clean": "rimraf dist"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gemeentenijmegen/components-css": "0.0.1-alpha.
|
|
29
|
+
"@gemeentenijmegen/components-css": "0.0.1-alpha.78",
|
|
30
30
|
"postcss-discard-duplicates": "7.0.1",
|
|
31
31
|
"rollup": "4.12.1",
|
|
32
32
|
"rollup-plugin-html": "0.2.1",
|
|
33
33
|
"rollup-plugin-node-resolve": "5.2.0",
|
|
34
34
|
"rollup-plugin-postcss": "4.0.2"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "aa12abb8cd148b30b7e006747440cc532c8316f5"
|
|
37
37
|
}
|
package/src/search/search.js
CHANGED
|
@@ -2,6 +2,10 @@ import style from '@gemeentenijmegen/components-css/search/index.scss';
|
|
|
2
2
|
import html from './template.html';
|
|
3
3
|
|
|
4
4
|
class NijmegenSearch extends HTMLElement {
|
|
5
|
+
static get observedAttributes() {
|
|
6
|
+
return ['full'];
|
|
7
|
+
}
|
|
8
|
+
|
|
5
9
|
constructor() {
|
|
6
10
|
super();
|
|
7
11
|
const template = document.createElement('template');
|
|
@@ -21,12 +25,31 @@ class NijmegenSearch extends HTMLElement {
|
|
|
21
25
|
const resultsList = this.querySelector('.nijmegen-listbox__list');
|
|
22
26
|
const resultsContainer = this.querySelector('.nijmegen-search__autocomplete-results');
|
|
23
27
|
|
|
28
|
+
this.#updateFullWidth();
|
|
29
|
+
|
|
24
30
|
this.#initializeSearch(input, clearButton);
|
|
25
31
|
if (resultsContainer && resultsContainer.classList.contains('nijmegen-search__autocomplete-results--example')) {
|
|
26
32
|
this.#initializeAutocomplete(input, clearButton, resultsList, resultsContainer);
|
|
27
33
|
}
|
|
28
34
|
}
|
|
29
35
|
|
|
36
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
37
|
+
if (name === 'full' && oldValue !== newValue) {
|
|
38
|
+
this.#updateFullWidth();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
#updateFullWidth() {
|
|
43
|
+
const form = this.shadowRoot.querySelector('.nijmegen-search');
|
|
44
|
+
if (form) {
|
|
45
|
+
if (this.hasAttribute('full')) {
|
|
46
|
+
form.classList.add('nijmegen-search--full-width');
|
|
47
|
+
} else {
|
|
48
|
+
form.classList.remove('nijmegen-search--full-width');
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
30
53
|
#initializeSearch(input, clearButton) {
|
|
31
54
|
if (input && clearButton) {
|
|
32
55
|
input.addEventListener('input', () => {
|