@ta-interaktiv/react-municipality-search 1.11.2 → 2.0.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/index.js +10 -10
  3. package/es/index.js +10 -10
  4. package/package.json +6 -6
  5. package/src/municipalitySearch.tsx +16 -15
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
4
4
 
5
+ # [2.0.0](https://gitlab.com/ta-interaktiv/packages/compare/@ta-interaktiv/react-municipality-search@1.11.3...@ta-interaktiv/react-municipality-search@2.0.0) (2023-11-08)
6
+
7
+ ### Features
8
+
9
+ - upgrade to latest styled-components version ([a27639a](https://gitlab.com/ta-interaktiv/packages/commit/a27639a387a1188d5090b21e4d97f1f1815afc6b))
10
+
11
+ ### BREAKING CHANGES
12
+
13
+ - new version of styled-components
14
+
15
+ ## [1.11.3](https://gitlab.com/ta-interaktiv/packages/compare/@ta-interaktiv/react-municipality-search@1.11.2...@ta-interaktiv/react-municipality-search@1.11.3) (2023-11-02)
16
+
17
+ ### Bug Fixes
18
+
19
+ - results same width as search ([e19a2e7](https://gitlab.com/ta-interaktiv/packages/commit/e19a2e7da39b4cca0f9301754aa0e49854b9b6d8))
20
+
5
21
  ## [1.11.2](https://gitlab.com/ta-interaktiv/packages/compare/@ta-interaktiv/react-municipality-search@1.11.1...@ta-interaktiv/react-municipality-search@1.11.2) (2023-11-02)
6
22
 
7
23
  ### Bug Fixes
package/dist/index.js CHANGED
@@ -412,15 +412,15 @@ var MunicipalitySearch = (function (_super) {
412
412
  var t = translationServiceFactory(MESSAGES, this.props.locale);
413
413
  return (React__default["default"].createElement(MunicipalitySearchContainer, { className: 'municipality-search' },
414
414
  React__default["default"].createElement(InputRow, { className: 'inputRow' },
415
- React__default["default"].createElement(FlexInput, { type: 'text', lessPaddingLeft: !!this.props.selectedMunicipality || this.props.iconOnRightSide, placeholder: this.props.placeholder || t('placeholder'), value: (_b = (_a = this.props.selectedMunicipality) === null || _a === void 0 ? void 0 : _a.NORMGEMEINDE) !== null && _b !== void 0 ? _b : value, disabled: this.state.error === 'error.municipalitiesNotDownloaded' ||
416
- !!this.props.selectedMunicipality, onChange: this.handleSearchChange, backgroundColor: this.props.inputBackgroundColor }),
417
- this.props.selectedMunicipality ? (React__default["default"].createElement(Icon, { onClick: function () { var _a, _b; return (_b = (_a = _this.props).onCloseHandler) === null || _b === void 0 ? void 0 : _b.call(_a); }, isClickable: true, id: 'search-closing-icon', isRight: true },
415
+ React__default["default"].createElement(FlexInput, { type: 'text', "$lessPaddingLeft": !!this.props.selectedMunicipality || this.props.iconOnRightSide, placeholder: this.props.placeholder || t('placeholder'), value: (_b = (_a = this.props.selectedMunicipality) === null || _a === void 0 ? void 0 : _a.NORMGEMEINDE) !== null && _b !== void 0 ? _b : value, disabled: this.state.error === 'error.municipalitiesNotDownloaded' ||
416
+ !!this.props.selectedMunicipality, onChange: this.handleSearchChange, "$backgroundColor": this.props.inputBackgroundColor }),
417
+ this.props.selectedMunicipality ? (React__default["default"].createElement(Icon, { onClick: function () { var _a, _b; return (_b = (_a = _this.props).onCloseHandler) === null || _b === void 0 ? void 0 : _b.call(_a); }, "$isClickable": true, id: 'search-closing-icon', "$isRight": true },
418
418
  React__default["default"].createElement("svg", { width: '20', height: '21', viewBox: '0 0 24 25', xmlns: 'http://www.w3.org/2000/svg', fill: 'currentColor', strokeWidth: "2" },
419
- React__default["default"].createElement("path", { d: 'M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z', fill: 'currentColor' })))) : (React__default["default"].createElement(Icon, { isRight: (_c = this.props) === null || _c === void 0 ? void 0 : _c.iconOnRightSide },
419
+ React__default["default"].createElement("path", { d: 'M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z', fill: 'currentColor' })))) : (React__default["default"].createElement(Icon, { "$isRight": (_c = this.props) === null || _c === void 0 ? void 0 : _c.iconOnRightSide },
420
420
  React__default["default"].createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2' },
421
421
  React__default["default"].createElement("circle", { cx: '7.5', cy: '7.5', r: '6' }),
422
422
  React__default["default"].createElement("line", { x1: '11', y1: '11', x2: '17', y2: '17' }))))),
423
- showResults(results) && (React__default["default"].createElement(Results, { className: 'results', backgroundColor: this.props.resultBackgroundColor }, showResults(results) && (React__default["default"].createElement(web.Transition, { native: true, items: results, keys: function (result) {
423
+ showResults(results) && (React__default["default"].createElement(Results, { className: 'results', "$backgroundColor": this.props.resultBackgroundColor }, showResults(results) && (React__default["default"].createElement(web.Transition, { native: true, items: results, keys: function (result) {
424
424
  return _this.muniToString(result);
425
425
  }, from: { transform: 'translate(0,-20px)', opacity: 0 }, enter: { transform: 'translate(0,0px)', opacity: 1 }, config: web.config.gentle }, function (values, result) {
426
426
  var _a;
@@ -466,18 +466,18 @@ var MunicipalitySearch = (function (_super) {
466
466
  };
467
467
  return MunicipalitySearch;
468
468
  }(React.Component));
469
- var Icon = styled__default["default"].i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"], ["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"])), function (props) { return (props.isClickable ? 'pointer' : 'default'); }, function (props) { return (props.isRight ? 'right: 0; padding-right: 0.8em;' : ''); });
470
- var MunicipalitySearchContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n"], ["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n"])));
469
+ var Icon = styled__default["default"].i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"], ["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"])), function (props) { return (props.$isClickable ? 'pointer' : 'default'); }, function (props) { return (props.$isRight ? 'right: 0; padding-right: 0.8em;' : ''); });
470
+ var MunicipalitySearchContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n position: relative;\n"], ["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n position: relative;\n"])));
471
471
  var InputRow = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n input:focus ~ i {\n opacity: 1;\n }\n .ui.input {\n width: 100%;\n max-width: 100%;\n transition: all 0.5s ease-in-out;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n input:focus ~ i {\n opacity: 1;\n }\n .ui.input {\n width: 100%;\n max-width: 100%;\n transition: all 0.5s ease-in-out;\n }\n"])));
472
472
  var FlexInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // reset the default input styles\n color: inherit;\n background-color: ", ";\n border: solid 1px #7e7e7e7e;\n border-radius: var(--border-radius);\n box-shadow: none;\n font-size: 1em;\n outline: none;\n transition: all 0.3s ease-in-out;\n padding: 0.5em;\n padding-left: ", ";\n margin: 0;\n width: 100%;\n display: flex;\n &:disabled{\n opacity: 0.5;\n }\n &::placeholder{\n color: inherit;\n opacity: 0.5;\n }\n"], ["\n // reset the default input styles\n color: inherit;\n background-color: ", ";\n border: solid 1px #7e7e7e7e;\n border-radius: var(--border-radius);\n box-shadow: none;\n font-size: 1em;\n outline: none;\n transition: all 0.3s ease-in-out;\n padding: 0.5em;\n padding-left: ", ";\n margin: 0;\n width: 100%;\n display: flex;\n &:disabled{\n opacity: 0.5;\n }\n &::placeholder{\n color: inherit;\n opacity: 0.5;\n }\n"])), function (_a) {
473
- var backgroundColor = _a.backgroundColor;
473
+ var backgroundColor = _a.$backgroundColor;
474
474
  return backgroundColor;
475
475
  }, function (_a) {
476
- var lessPaddingLeft = _a.lessPaddingLeft;
476
+ var lessPaddingLeft = _a.$lessPaddingLeft;
477
477
  return (lessPaddingLeft ? '1em' : '2.4em');
478
478
  });
479
479
  var Results = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-top: .25em;\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 0;\n font-family: var(--font-plex);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n position: absolute;\n background-color: ", ";\n width: 100%;\n border-radius: var(--border-radius);\n @media screen and (min-width: 599px) {\n max-width: 300px;\n }\n .result {\n max-width: 100%;\n color: currentColor;\n padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n border-radius: var(--border-radius);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n //border: 1px solid #007abf;\n color: inherit;\n line-height: 1.1em;\n cursor: pointer;\n transition: box-shadow 200ms ease-in-out;\n &:hover,\n &:focus {\n box-shadow:\n 0 0 0.5ex rgba(0, 0, 0, 0.2),\n 0 0 0 1px #007abf inset;\n }\n }\n"], ["\n margin-top: .25em;\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 0;\n font-family: var(--font-plex);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n position: absolute;\n background-color: ", ";\n width: 100%;\n border-radius: var(--border-radius);\n @media screen and (min-width: 599px) {\n max-width: 300px;\n }\n .result {\n max-width: 100%;\n color: currentColor;\n padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n border-radius: var(--border-radius);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n //border: 1px solid #007abf;\n color: inherit;\n line-height: 1.1em;\n cursor: pointer;\n transition: box-shadow 200ms ease-in-out;\n &:hover,\n &:focus {\n box-shadow:\n 0 0 0.5ex rgba(0, 0, 0, 0.2),\n 0 0 0 1px #007abf inset;\n }\n }\n"])), function (_a) {
480
- var backgroundColor = _a.backgroundColor;
480
+ var backgroundColor = _a.$backgroundColor;
481
481
  return backgroundColor;
482
482
  });
483
483
  var ResultHeader = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /* font-weight: 700; */\n"], ["\n /* font-weight: 700; */\n"])));
package/es/index.js CHANGED
@@ -402,15 +402,15 @@ var MunicipalitySearch = (function (_super) {
402
402
  var t = translationServiceFactory(MESSAGES, this.props.locale);
403
403
  return (React.createElement(MunicipalitySearchContainer, { className: 'municipality-search' },
404
404
  React.createElement(InputRow, { className: 'inputRow' },
405
- React.createElement(FlexInput, { type: 'text', lessPaddingLeft: !!this.props.selectedMunicipality || this.props.iconOnRightSide, placeholder: this.props.placeholder || t('placeholder'), value: (_b = (_a = this.props.selectedMunicipality) === null || _a === void 0 ? void 0 : _a.NORMGEMEINDE) !== null && _b !== void 0 ? _b : value, disabled: this.state.error === 'error.municipalitiesNotDownloaded' ||
406
- !!this.props.selectedMunicipality, onChange: this.handleSearchChange, backgroundColor: this.props.inputBackgroundColor }),
407
- this.props.selectedMunicipality ? (React.createElement(Icon, { onClick: function () { var _a, _b; return (_b = (_a = _this.props).onCloseHandler) === null || _b === void 0 ? void 0 : _b.call(_a); }, isClickable: true, id: 'search-closing-icon', isRight: true },
405
+ React.createElement(FlexInput, { type: 'text', "$lessPaddingLeft": !!this.props.selectedMunicipality || this.props.iconOnRightSide, placeholder: this.props.placeholder || t('placeholder'), value: (_b = (_a = this.props.selectedMunicipality) === null || _a === void 0 ? void 0 : _a.NORMGEMEINDE) !== null && _b !== void 0 ? _b : value, disabled: this.state.error === 'error.municipalitiesNotDownloaded' ||
406
+ !!this.props.selectedMunicipality, onChange: this.handleSearchChange, "$backgroundColor": this.props.inputBackgroundColor }),
407
+ this.props.selectedMunicipality ? (React.createElement(Icon, { onClick: function () { var _a, _b; return (_b = (_a = _this.props).onCloseHandler) === null || _b === void 0 ? void 0 : _b.call(_a); }, "$isClickable": true, id: 'search-closing-icon', "$isRight": true },
408
408
  React.createElement("svg", { width: '20', height: '21', viewBox: '0 0 24 25', xmlns: 'http://www.w3.org/2000/svg', fill: 'currentColor', strokeWidth: "2" },
409
- React.createElement("path", { d: 'M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z', fill: 'currentColor' })))) : (React.createElement(Icon, { isRight: (_c = this.props) === null || _c === void 0 ? void 0 : _c.iconOnRightSide },
409
+ React.createElement("path", { d: 'M3.9 22L2 20.1L9.6 12.5L2 4.9L3.9 3L11.5 10.6L19.1 3L21 4.9L13.4 12.5L21 20.1L19.1 22L11.5 14.4L3.9 22Z', fill: 'currentColor' })))) : (React.createElement(Icon, { "$isRight": (_c = this.props) === null || _c === void 0 ? void 0 : _c.iconOnRightSide },
410
410
  React.createElement("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2' },
411
411
  React.createElement("circle", { cx: '7.5', cy: '7.5', r: '6' }),
412
412
  React.createElement("line", { x1: '11', y1: '11', x2: '17', y2: '17' }))))),
413
- showResults(results) && (React.createElement(Results, { className: 'results', backgroundColor: this.props.resultBackgroundColor }, showResults(results) && (React.createElement(Transition, { native: true, items: results, keys: function (result) {
413
+ showResults(results) && (React.createElement(Results, { className: 'results', "$backgroundColor": this.props.resultBackgroundColor }, showResults(results) && (React.createElement(Transition, { native: true, items: results, keys: function (result) {
414
414
  return _this.muniToString(result);
415
415
  }, from: { transform: 'translate(0,-20px)', opacity: 0 }, enter: { transform: 'translate(0,0px)', opacity: 1 }, config: config.gentle }, function (values, result) {
416
416
  var _a;
@@ -456,18 +456,18 @@ var MunicipalitySearch = (function (_super) {
456
456
  };
457
457
  return MunicipalitySearch;
458
458
  }(Component));
459
- var Icon = styled.i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"], ["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"])), function (props) { return (props.isClickable ? 'pointer' : 'default'); }, function (props) { return (props.isRight ? 'right: 0; padding-right: 0.8em;' : ''); });
460
- var MunicipalitySearchContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n"], ["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n"])));
459
+ var Icon = styled.i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"], ["\n cursor: ", ";\n position: absolute;\n top: 50%;\n ", "\n padding-left: 0.8em;\n transform: translateY(-50%);\n display: flex;\n opacity: 0.5;\n transition: opacity 0.5s ease-in-out;\n animation: fromLeft 0.3s ease-in-out;\n @keyframes fromLeft {\n 0% {\n transform: translateY(-50%) translateX(-10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n &#search-closing-icon {\n &:hover {\n opacity: 1;\n }\n animation: fromRight 0.3s ease-in-out;\n @keyframes fromRight {\n 0% {\n transform: translateY(-50%) translateX(10px);\n opacity: 0;\n }\n 100% {\n transform: translateY(-50%) translateX(0);\n }\n }\n }\n"])), function (props) { return (props.$isClickable ? 'pointer' : 'default'); }, function (props) { return (props.$isRight ? 'right: 0; padding-right: 0.8em;' : ''); });
460
+ var MunicipalitySearchContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n position: relative;\n"], ["\n --border-radius: 0.3em;\n font-size: 18px;\n font-family: var(--font-plex);\n @media screen and (max-width: 599px) {\n max-width: 100%;\n }\n max-width: 300px;\n width: 100%;\n color: inherit;\n position: relative;\n"])));
461
461
  var InputRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n input:focus ~ i {\n opacity: 1;\n }\n .ui.input {\n width: 100%;\n max-width: 100%;\n transition: all 0.5s ease-in-out;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n input:focus ~ i {\n opacity: 1;\n }\n .ui.input {\n width: 100%;\n max-width: 100%;\n transition: all 0.5s ease-in-out;\n }\n"])));
462
462
  var FlexInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // reset the default input styles\n color: inherit;\n background-color: ", ";\n border: solid 1px #7e7e7e7e;\n border-radius: var(--border-radius);\n box-shadow: none;\n font-size: 1em;\n outline: none;\n transition: all 0.3s ease-in-out;\n padding: 0.5em;\n padding-left: ", ";\n margin: 0;\n width: 100%;\n display: flex;\n &:disabled{\n opacity: 0.5;\n }\n &::placeholder{\n color: inherit;\n opacity: 0.5;\n }\n"], ["\n // reset the default input styles\n color: inherit;\n background-color: ", ";\n border: solid 1px #7e7e7e7e;\n border-radius: var(--border-radius);\n box-shadow: none;\n font-size: 1em;\n outline: none;\n transition: all 0.3s ease-in-out;\n padding: 0.5em;\n padding-left: ", ";\n margin: 0;\n width: 100%;\n display: flex;\n &:disabled{\n opacity: 0.5;\n }\n &::placeholder{\n color: inherit;\n opacity: 0.5;\n }\n"])), function (_a) {
463
- var backgroundColor = _a.backgroundColor;
463
+ var backgroundColor = _a.$backgroundColor;
464
464
  return backgroundColor;
465
465
  }, function (_a) {
466
- var lessPaddingLeft = _a.lessPaddingLeft;
466
+ var lessPaddingLeft = _a.$lessPaddingLeft;
467
467
  return (lessPaddingLeft ? '1em' : '2.4em');
468
468
  });
469
469
  var Results = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-top: .25em;\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 0;\n font-family: var(--font-plex);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n position: absolute;\n background-color: ", ";\n width: 100%;\n border-radius: var(--border-radius);\n @media screen and (min-width: 599px) {\n max-width: 300px;\n }\n .result {\n max-width: 100%;\n color: currentColor;\n padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n border-radius: var(--border-radius);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n //border: 1px solid #007abf;\n color: inherit;\n line-height: 1.1em;\n cursor: pointer;\n transition: box-shadow 200ms ease-in-out;\n &:hover,\n &:focus {\n box-shadow:\n 0 0 0.5ex rgba(0, 0, 0, 0.2),\n 0 0 0 1px #007abf inset;\n }\n }\n"], ["\n margin-top: .25em;\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 0;\n font-family: var(--font-plex);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n pointer-events: auto;\n position: absolute;\n background-color: ", ";\n width: 100%;\n border-radius: var(--border-radius);\n @media screen and (min-width: 599px) {\n max-width: 300px;\n }\n .result {\n max-width: 100%;\n color: currentColor;\n padding: calc(11 / 16 * 1em) calc(14 / 16 * 1em);\n border-radius: var(--border-radius);\n box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);\n //border: 1px solid #007abf;\n color: inherit;\n line-height: 1.1em;\n cursor: pointer;\n transition: box-shadow 200ms ease-in-out;\n &:hover,\n &:focus {\n box-shadow:\n 0 0 0.5ex rgba(0, 0, 0, 0.2),\n 0 0 0 1px #007abf inset;\n }\n }\n"])), function (_a) {
470
- var backgroundColor = _a.backgroundColor;
470
+ var backgroundColor = _a.$backgroundColor;
471
471
  return backgroundColor;
472
472
  });
473
473
  var ResultHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /* font-weight: 700; */\n"], ["\n /* font-weight: 700; */\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ta-interaktiv/react-municipality-search",
3
- "version": "1.11.2",
3
+ "version": "2.0.0",
4
4
  "description": "React component that allows searching for Swiss municipalities with either ZIP code or place names.",
5
5
  "keywords": [
6
6
  "react",
@@ -45,12 +45,12 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "@react-spring/web": "9.6.x",
48
- "js-cookie": "^3.0.1",
49
- "styled-components": "^6.1.0"
48
+ "js-cookie": "^3.0.1"
50
49
  },
51
50
  "peerDependencies": {
52
- "react": ">=16.0.0",
53
- "react-dom": ">=16.0.0"
51
+ "react": ">=16.8.0",
52
+ "react-dom": ">=16.8.0",
53
+ "styled-components": "^6.1.1"
54
54
  },
55
- "gitHead": "b3f428e2a6686963014e2d5e251b66c3db2a5e57"
55
+ "gitHead": "9b2228afdd561a79ff80240a17df761439ad3aed"
56
56
  }
package/src/municipalitySearch.tsx CHANGED
@@ -543,7 +543,7 @@ private muniToString(muni: Municipality){
543
543
  // id='search'
544
544
  type='text'
545
545
  // className='prompt flexInput'
546
- lessPaddingLeft={
546
+ $lessPaddingLeft={
547
547
  !!this.props.selectedMunicipality || this.props.iconOnRightSide
548
548
  }
549
549
  placeholder={this.props.placeholder || (t('placeholder') as string)}
@@ -553,14 +553,14 @@ private muniToString(muni: Municipality){
553
553
  !!this.props.selectedMunicipality
554
554
  }
555
555
  onChange={this.handleSearchChange}
556
- backgroundColor={this.props.inputBackgroundColor}
556
+ $backgroundColor={this.props.inputBackgroundColor}
557
557
  />
558
558
  {this.props.selectedMunicipality ? (
559
559
  <Icon
560
560
  onClick={() => this.props.onCloseHandler?.()}
561
- isClickable
561
+ $isClickable
562
562
  id='search-closing-icon'
563
- isRight
563
+ $isRight
564
564
  >
565
565
  <svg
566
566
  width='20'
@@ -577,7 +577,7 @@ private muniToString(muni: Municipality){
577
577
  </svg>
578
578
  </Icon>
579
579
  ) : (
580
- <Icon isRight={this.props?.iconOnRightSide}>
580
+ <Icon $isRight={this.props?.iconOnRightSide}>
581
581
  <svg
582
582
  width='18'
583
583
  height='18'
@@ -596,7 +596,7 @@ private muniToString(muni: Municipality){
596
596
  {showResults(results) && (
597
597
  <Results
598
598
  className='results'
599
- backgroundColor={this.props.resultBackgroundColor}
599
+ $backgroundColor={this.props.resultBackgroundColor}
600
600
  >
601
601
  {showResults(results) && (
602
602
  <Transition
@@ -667,11 +667,11 @@ private muniToString(muni: Municipality){
667
667
 
668
668
  // endregion
669
669
  }
670
- const Icon = styled.i<{ isRight?: boolean; isClickable?: boolean }>`
671
- cursor: ${(props) => (props.isClickable ? 'pointer' : 'default')};
670
+ const Icon = styled.i<{ $isRight?: boolean; $isClickable?: boolean }>`
671
+ cursor: ${(props) => (props.$isClickable ? 'pointer' : 'default')};
672
672
  position: absolute;
673
673
  top: 50%;
674
- ${(props) => (props.isRight ? 'right: 0; padding-right: 0.8em;' : '')}
674
+ ${(props) => (props.$isRight ? 'right: 0; padding-right: 0.8em;' : '')}
675
675
  padding-left: 0.8em;
676
676
  transform: translateY(-50%);
677
677
  display: flex;
@@ -713,6 +713,7 @@ const MunicipalitySearchContainer = styled.div`
713
713
  max-width: 300px;
714
714
  width: 100%;
715
715
  color: inherit;
716
+ position: relative;
716
717
  `
717
718
  const InputRow = styled.div`
718
719
  position: relative;
@@ -729,12 +730,12 @@ const InputRow = styled.div`
729
730
  }
730
731
  `
731
732
  const FlexInput = styled.input<{
732
- lessPaddingLeft?: boolean
733
- backgroundColor?: string
733
+ $lessPaddingLeft?: boolean
734
+ $backgroundColor?: string
734
735
  }>`
735
736
  // reset the default input styles
736
737
  color: inherit;
737
- background-color: ${({ backgroundColor }) => backgroundColor};
738
+ background-color: ${({ $backgroundColor: backgroundColor }) => backgroundColor};
738
739
  border: solid 1px #7e7e7e7e;
739
740
  border-radius: var(--border-radius);
740
741
  box-shadow: none;
@@ -742,7 +743,7 @@ const FlexInput = styled.input<{
742
743
  outline: none;
743
744
  transition: all 0.3s ease-in-out;
744
745
  padding: 0.5em;
745
- padding-left: ${({ lessPaddingLeft }) => (lessPaddingLeft ? '1em' : '2.4em')};
746
+ padding-left: ${({ $lessPaddingLeft: lessPaddingLeft }) => (lessPaddingLeft ? '1em' : '2.4em')};
746
747
  margin: 0;
747
748
  width: 100%;
748
749
  display: flex;
@@ -754,7 +755,7 @@ const FlexInput = styled.input<{
754
755
  opacity: 0.5;
755
756
  }
756
757
  `
757
- const Results = styled.div<{ backgroundColor?: string }>`
758
+ const Results = styled.div<{ $backgroundColor?: string }>`
758
759
  margin-top: .25em;
759
760
  display: grid;
760
761
  grid-template-columns: 1fr;
@@ -765,7 +766,7 @@ const Results = styled.div<{ backgroundColor?: string }>`
765
766
  flex-direction: column;
766
767
  pointer-events: auto;
767
768
  position: absolute;
768
- background-color: ${({ backgroundColor }) => backgroundColor};
769
+ background-color: ${({ $backgroundColor: backgroundColor }) => backgroundColor};
769
770
  width: 100%;
770
771
  border-radius: var(--border-radius);
771
772
  @media screen and (min-width: 599px) {