@ta-interaktiv/react-municipality-search 1.11.3 → 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 +10 -0
  2. package/dist/index.js +9 -9
  3. package/es/index.js +9 -9
  4. package/package.json +6 -6
  5. package/src/municipalitySearch.tsx +15 -15
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
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
+
5
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)
6
16
 
7
17
  ### 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;' : ''); });
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
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;' : ''); });
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
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.3",
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": "7866343406de454dd2c0328b2e4e650e28da67a1"
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;
@@ -730,12 +730,12 @@ const InputRow = styled.div`
730
730
  }
731
731
  `
732
732
  const FlexInput = styled.input<{
733
- lessPaddingLeft?: boolean
734
- backgroundColor?: string
733
+ $lessPaddingLeft?: boolean
734
+ $backgroundColor?: string
735
735
  }>`
736
736
  // reset the default input styles
737
737
  color: inherit;
738
- background-color: ${({ backgroundColor }) => backgroundColor};
738
+ background-color: ${({ $backgroundColor: backgroundColor }) => backgroundColor};
739
739
  border: solid 1px #7e7e7e7e;
740
740
  border-radius: var(--border-radius);
741
741
  box-shadow: none;
@@ -743,7 +743,7 @@ const FlexInput = styled.input<{
743
743
  outline: none;
744
744
  transition: all 0.3s ease-in-out;
745
745
  padding: 0.5em;
746
- padding-left: ${({ lessPaddingLeft }) => (lessPaddingLeft ? '1em' : '2.4em')};
746
+ padding-left: ${({ $lessPaddingLeft: lessPaddingLeft }) => (lessPaddingLeft ? '1em' : '2.4em')};
747
747
  margin: 0;
748
748
  width: 100%;
749
749
  display: flex;
@@ -755,7 +755,7 @@ const FlexInput = styled.input<{
755
755
  opacity: 0.5;
756
756
  }
757
757
  `
758
- const Results = styled.div<{ backgroundColor?: string }>`
758
+ const Results = styled.div<{ $backgroundColor?: string }>`
759
759
  margin-top: .25em;
760
760
  display: grid;
761
761
  grid-template-columns: 1fr;
@@ -766,7 +766,7 @@ const Results = styled.div<{ backgroundColor?: string }>`
766
766
  flex-direction: column;
767
767
  pointer-events: auto;
768
768
  position: absolute;
769
- background-color: ${({ backgroundColor }) => backgroundColor};
769
+ background-color: ${({ $backgroundColor: backgroundColor }) => backgroundColor};
770
770
  width: 100%;
771
771
  border-radius: var(--border-radius);
772
772
  @media screen and (min-width: 599px) {