npm - @oiz/stzh-components - Versions diffs - 3.4.0-beta1 → 3.4.0-beta2 - Mend

@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

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 (307) hide show

package/dist/esm/stzh-geo-ref-data.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-geo-ref-data.entry.js","mappings":"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","names":["Document"],"sources":["src/components/stzh-geo-ref-data/stzh-geo-ref-data.scss?tag=stzh-geo-ref-data&encapsulation=shadow","src/components/stzh-geo-ref-data/stzh-geo-ref-data.tsx"],"sourcesContent":[":host {\n --meta-grid-template-areas: \"filters\" \"search\" \"resultstoggle\";\n --results-grid-template-areas: \"map\" \"list\";\n\n @include mq($from: large) {\n --meta-grid-template-areas: \"filters filters filters filters filters filters filters filters search search search search\";\n --results-grid-template-areas: \"map map map map map map map map list list list list\";\n }\n\n}\n\n.stzh-geo-ref-data {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 899;\n flex-direction: column;\n transition: opacity ease 0.2s;\n\n // initially hidden\n display: none;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n\n &--is-open {\n display: flex;\n opacity: 1;\n visibility: visible;\n pointer-events: inherit;\n }\n\n &__content {\n overflow: hidden;\n height: 100%;\n }\n\n &--content-padding {\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n }\n\n &__heading {\n display: flex;\n background-color: var(--stzh-color-secondary20);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n /** Everything meta wrapper like search, filters etc. /\n\n &__meta-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: space(large);\n\n @include spaceCurve('padding-top', 'small');\n @include spaceCurve('padding-bottom', 'small');\n\n @include mq($from: large) {\n @include grid;\n grid-template-areas: var(--meta-grid-template-areas);\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n\n &__filters {\n grid-area: filters;\n flex: none;\n margin-bottom: space(xxsmall);\n }\n\n &__filters-toggle {\n @include mq($from: large) {\n display: none;\n }\n }\n\n &__filters-toggle stzh-chip {\n @include mq($to: medium) {\n --icon-gap: 0;\n }\n }\n\n &__filters-content {\n display: none;\n\n @include mq($from: large) {\n display: block;\n }\n }\n\n &__search {\n grid-area: search;\n width: 100%;\n\n @include mq($from: large) {\n padding-left: 12px;\n }\n }\n\n &__results-toggle {\n grid-area: resultstoggle;\n flex: none;\n margin-bottom: space(xxsmall);\n\n @include mq($from: large) {\n display: none;\n }\n }\n\n /* Everything with results /\n\n &__results-wrapper {\n height: 100%;\n\n @include mq($from: large) {\n @include grid;\n grid-template-areas: var(--results-grid-template-areas);\n --grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n\n &__results-wrapper .inactive {\n @include mq($to: large) {\n visibility: hidden;\n height: 0;\n position: absolute;\n overflow: hidden;\n }\n }\n\n &__results-map {\n grid-area: map;\n position: relative;\n height: 100%;\n }\n\n &__map-controls {\n position: absolute;\n top: space(small);\n left: space(small);\n background-color: var(--stzh-color-white);\n padding: space(xsmall);\n }\n\n &__results-list {\n grid-area: list;\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n padding-bottom: space(large);\n overflow: auto;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: 0;\n padding-right: $containerMarginSmall;\n overflow: auto;\n }\n }\n\n &__results-list-heading {\n margin-bottom: var(--stzh-space-medium);\n }\n\n &__ol-map {\n }\n\n &__teaser-list {\n display: grid;\n gap: var(--stzh-space-medium);\n grid-template-columns: 1fr;\n\n @include mq($from: small) {\n grid-template-columns: 1fr 1fr;\n }\n\n @include mq($from: large) {\n grid-template-columns: 1fr;\n }\n }\n\n &__teaser-load-more {\n display: flex;\n justify-content: center;\n margin-top: space(regular);\n }\n}\n\n/* TEMP - MOVE TO COMPONENT /\n\n.stzh-poi-teaser {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 180px;\n height: 180px;\n background-color: var(--stzh-color-grey10);\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: var(--stzh-color-secondary10);\n }\n\n &-content {\n padding: var(--stzh-space-medium);\n hyphens: auto;\n\n stzh-heading {\n margin-bottom: space(xsmall);\n }\n\n stzh-text {\n --color: var(--stzh-color-grey80);\n }\n }\n\n &-link {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n &-image {\n position: relative;\n overflow: hidden;\n }\n\n &-image-inner {\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &-image-inner img {\n height: 180px;\n }\n\n &-list-item {\n display: flex;\n gap: space(small);\n margin-top: space(xxsmall);\n\n stzh-icon, stzh-text {\n --color: var(--stzh-color-grey80);\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from \"@stencil/core\";\nimport {\n StzhAvailableTag,\n StzhChipselectChangeEvent,\n StzhChipselectItem,\n StzhCombinedGeoRefData,\n StzhGeoRefDataOverlayCloseClickEvent,\n StzhMapGeoRefData,\n StzhPoiGeoRefData,\n} from \"../../index\";\nimport { Document } from \"flexsearch/dist/flexsearch.bundle.min.js\";\nimport {\n addMediaChangeListener,\n media,\n removeMediaChangeListener,\n} from \"../../utils/media-utils\";\n\n@Component({\n tag: \"stzh-geo-ref-data\",\n styleUrl: \"stzh-geo-ref-data.scss\",\n shadow: true,\n})\nexport class GeoRefData {\n / Heading for the overlay. /\n @Prop({ reflect: true }) heading: string = \"\";\n\n /* The URL for fetching the card data /\n @Prop({ reflect: true }) mapDataUrl: string = \"\";\n\n /* The URL used for fetching the POI data. /\n @Prop({ reflect: true }) poiDataUrl: string = \"\";\n\n /* Base URL used for all external requests (map, card). /\n @Prop() baseUrlOverride: string = \"https://www.stadt-zuerich.ch\";\n\n /* To make sure all tags are mapped to their identificator, only these will be available. /\n @Prop() availableTags: StzhAvailableTag[] = [];\n\n @Prop() resetTag: StzhChipselectItem;\n\n @State() filterActive: boolean = false;\n @State() searchActive: boolean = false;\n @State() showOnlyResultsForCurrentExtent: boolean = true;\n @State() finalResults: StzhCombinedGeoRefData[] = [];\n @State() finalResultsPaginatedList: StzhCombinedGeoRefData[] = [];\n @State() finalResultsPaginationOffset = 0;\n\n @State() viewmode: \"map\" \| \"list\" = \"map\";\n @State() isViewportLarge: boolean;\n @State() isViewportMedium: boolean;\n @State() isInitialized: boolean;\n @State() isOpen: boolean;\n @State() isLoading: boolean;\n\n /* Overlay close click event /\n @Event()\n stzhOverlayCloseClick: EventEmitter<StzhGeoRefDataOverlayCloseClickEvent>;\n\n private combinedData: StzhCombinedGeoRefData[];\n private enhancedTags: StzhChipselectItem[];\n private searchIndex: Document;\n\n private filterResults: StzhCombinedGeoRefData[] = [];\n private searchResults: Set<string>;\n\n @Element() element: HTMLStzhGeoRefDataElement;\n private mapElement: HTMLStzhOlmapElement;\n private metaWrapperElement: HTMLDivElement;\n private resultsListElement: HTMLDivElement;\n private resizeObserver: ResizeObserver;\n\n private handleOverlayCloseClick = () => {\n this.isOpen = false;\n };\n\n private handleResize = async () => {\n if (this.metaWrapperElement && this.metaWrapperElement.clientHeight) {\n this.mapElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n this.resultsListElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n const map = await this.mapElement.getMap();\n map.updateSize();\n }\n };\n\n private mediaChangeHandler = () => {\n this.isViewportLarge = media(\"large\").matches;\n this.isViewportMedium = media(\"medium\").matches;\n };\n\n private async loadMapData(): Promise<StzhMapGeoRefData[]> {\n if (!this.mapDataUrl) {\n console.log(\"No map data URL provided\");\n return [];\n }\n try {\n // TODO: add loader\n const response = await fetch(this.mapDataUrl);\n const rawMapData = await response.text();\n // console.log('Raw Map data:', rawMapData);\n const parsedData = new DOMParser().parseFromString(\n rawMapData,\n \"text/xml\"\n );\n // console.log('Parsed Map data:', parsedData);\n\n const items = Array.from(\n parsedData.querySelectorAll(\"featureMember\")\n ).map((item) => {\n const pos = item.querySelector(\"pos\")?.textContent;\n const poiid = item.querySelector(\"poi_id\")?.textContent;\n const [lat, lon] = pos?.split(\" \") \|\| [];\n\n return { poiid, lat, lon } as StzhMapGeoRefData;\n });\n\n // console.log('Loaded Map Data:', items);\n // this.mapData = items;\n // TODO: handle empty items\n return items;\n } catch (error) {\n console.error(\"Error fetching map data:\", error);\n // TODO: add user error (toast)\n }\n }\n\n private async loadPoiData() {\n if (!this.poiDataUrl) {\n console.error(\"No POI data URL provided\");\n return [];\n }\n try {\n const response = await fetch(this.poiDataUrl, { credentials: \"include\" });\n // console.log('Response:', response);\n\n const poiData = await response.json();\n // console.log('POI data:', poiData);\n // this.poiData = poiData.items;\n // TODO: handle empty items\n return poiData.items;\n } catch (error) {\n console.error(\"Error fetching POI data:\", error);\n // TODO: add user error (toast)\n }\n }\n\n private combineData(\n firstArray: StzhMapGeoRefData[] \| StzhPoiGeoRefData[],\n secondArray: StzhMapGeoRefData[] \| StzhPoiGeoRefData[]\n ): StzhCombinedGeoRefData[] {\n if (!firstArray.length \|\| !secondArray.length) {\n console.error(\"Missing data to combine\");\n return [];\n }\n // determine which array is smaller for performance\n let smallerArray: any[];\n let largerArray: any[];\n\n if (firstArray.length < secondArray.length) {\n smallerArray = firstArray;\n largerArray = secondArray;\n } else {\n smallerArray = secondArray;\n largerArray = firstArray;\n }\n // combine arrays based on poiid\n const combinedData = smallerArray\n .map((item) => {\n const matchingItem = largerArray.find(\n (largerArrayItem) => largerArrayItem.poiid === item.poiid\n );\n return { ...item, ...matchingItem };\n })\n .sort((a, b) => {\n return a.title.localeCompare(b.title); // Sorts alphabetically by the 'name' property\n });\n console.log(\"Combined Data:\", combinedData);\n return combinedData;\n }\n\n private enhanceTags(\n availableTags: StzhAvailableTag[],\n combinedData: StzhCombinedGeoRefData[]\n ): StzhChipselectItem[] {\n return availableTags\n .sort((a, b) => a.label.localeCompare(b.label))\n .map((tag) => {\n const counter = combinedData\n .filter((item) => item.tags.includes(tag.value))\n .length.toString();\n return { ...tag, counter, variant: \"filter\" };\n });\n }\n\n private buildSearchIndex(data: StzhCombinedGeoRefData[]) {\n if (!data.length) {\n return;\n }\n this.searchIndex = new Document({\n tokenize: \"forward\",\n matcher: {\n \"[äà]\": \"a\",\n \"[öó]\": \"o\",\n \"[üûúù]\": \"u\",\n \"[éè]\": \"e\",\n },\n document: {\n id: \"poiid\", // TODO: move to props so that backend can define\n index: [\"title\", \"street\", \"zip\", \"description\"], //TODO: move to props so that backend can define\n },\n });\n data.forEach((item) => {\n this.searchIndex.add(item);\n });\n }\n\n @Listen(\"stzhMovePanZoom\")\n async mapMovedPannedOrZoomed() {\n if (this.showOnlyResultsForCurrentExtent) {\n const visibleMarkers = await this.mapElement.getVisibleMarkers();\n console.log(\"visibleMarkers\", visibleMarkers);\n }\n }\n\n connectedCallback() {\n this.mediaChangeHandler();\n addMediaChangeListener(this.mediaChangeHandler);\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private async initializeAndOpenMap() {\n this.isLoading = true;\n this.isOpen = true;\n\n try {\n this.combinedData = this.combineData(\n await this.loadMapData(),\n await this.loadPoiData()\n );\n this.enhancedTags = this.enhanceTags(\n this.availableTags,\n this.combinedData\n );\n this.buildSearchIndex(this.combinedData);\n const enhancedResetTag = {\n ...this.resetTag,\n counter: this.combinedData.length.toString(),\n };\n if (this.resetTag) {\n this.enhancedTags.unshift(enhancedResetTag);\n }\n this.finalResults = this.combinedData;\n this.finalResultsPaginatedList = this.finalResults.slice(0, 20);\n await this.combineFilterAndSearchResults();\n await this.handleResize();\n await this.mapElement.updateViewToFitMarkers();\n await this.handleResize();\n this.isInitialized = true;\n } catch (mapException) {\n console.error(\"mapException\", mapException);\n }\n\n setTimeout(() => {\n this.isLoading = false;\n }, 500);\n }\n\n private handleFilterChange = async (\n e: CustomEvent<StzhChipselectChangeEvent>\n ) => {\n if (e.detail.value.length !== 0) {\n this.filterResults = this.combinedData.filter((item) =>\n item.tags.some((tag) => e.detail.value.includes(tag))\n );\n this.filterActive = true;\n } else {\n this.filterActive = false;\n }\n await this.combineFilterAndSearchResults();\n };\n\n private handleExtentVisibilityChange = (e) => {\n this.showOnlyResultsForCurrentExtent = e.detail.checked;\n };\n\n private handleSearchChange = async (e: CustomEvent) => {\n if (e.detail.value !== \"\") {\n if (!this.searchIndex) {\n return;\n }\n const searchResults = this.searchIndex.search(e.detail.value);\n const flatSearchResults = searchResults.flatMap((field) => field.result);\n this.searchResults = new Set(flatSearchResults);\n this.searchActive = true;\n } else {\n this.searchActive = false;\n }\n await this.combineFilterAndSearchResults();\n };\n\n private async combineFilterAndSearchResults() {\n if (this.filterActive && !this.searchActive) {\n this.finalResults = this.filterResults;\n } else if (!this.filterActive && this.searchActive) {\n this.finalResults = Array.from(this.searchResults).map((poiid) =>\n this.combinedData.find((item) => item.poiid === poiid)\n );\n } else if (this.filterActive && this.searchActive) {\n this.finalResults = this.filterResults.filter((item) =>\n this.searchResults.has(item.poiid)\n );\n } else {\n this.finalResults = this.combinedData;\n }\n\n this.finalResultsPaginatedList = this.finalResults.slice(0, 20);\n\n await this.replaceMapMarkers(this.finalResults);\n }\n\n private loadMore() {\n this.finalResultsPaginationOffset++;\n this.finalResultsPaginatedList = this.finalResultsPaginatedList.concat(\n this.finalResults.slice(\n this.finalResultsPaginationOffset 20,\n this.finalResultsPaginationOffset * 20 + 20\n )\n );\n }\n\n // private async handleExtendVisibility() {\n // if (this.showOnlyResultsForCurrentExtent) {\n // const visibleMarkers = await this.mapElement.getVisibleMarkers();\n // console.log(\"visibleMarkers\", visibleMarkers);\n // }\n // }\n\n private async replaceMapMarkers(items: StzhCombinedGeoRefData[]) {\n await this.mapElement.removeAllIconMarkers();\n items\n .filter((item) => !!item.lat && !!item.lon)\n .forEach((item) => {\n this.mapElement\n .addIconMarker([parseFloat(item.lat), parseFloat(item.lon)], {\n id: item.poiid,\n title: item.title,\n text: item.description,\n data: item.data,\n imageUri: `${this.baseUrlOverride}${item.image}`,\n href: `${this.baseUrlOverride}${item.path}`,\n })\n .catch();\n });\n if (!this.showOnlyResultsForCurrentExtent) {\n this.mapElement.updateViewToFitMarkers().catch();\n }\n }\n\n private toggleViewMode = () => {\n if (this.viewmode === \"map\") {\n this.viewmode = \"list\";\n } else {\n this.viewmode = \"map\";\n }\n };\n\n private async handlePoiTeaserMouseEnter(item: StzhCombinedGeoRefData) {\n const marker = await this.mapElement.findMarkerById(item.poiid);\n if (marker) {\n await this.mapElement.setIconMarkerActive(marker);\n }\n }\n\n private async handlePoiTeaserMouseLeave(item: StzhCombinedGeoRefData) {\n const marker = await this.mapElement.findMarkerById(item.poiid);\n if (marker) {\n await this.mapElement.setIconMarkerInactive(marker);\n }\n }\n\n // render chipselect\n\n render() {\n const classes = {\n \"stzh-geo-ref-data\": true,\n \"stzh-geo-ref-data--is-loading\": this.isLoading,\n \"stzh-geo-ref-data--is-open\": this.isOpen,\n };\n return (\n <Host>\n <div\n class=\"stzh-geo-ref-data__trigger\"\n onClick={() => this.initializeAndOpenMap()}\n >\n <slot name=\"trigger\"></slot>\n </div>\n <stzh-overlay open={this.isLoading}>\n <stzh-loader label=\"Daten werden geladen...\"></stzh-loader>\n </stzh-overlay>\n <div class={classes}>\n <div class=\"stzh-geo-ref-data__header-wrapper\">\n <stzh-header hide-metabar={true}>\n <img\n slot=\"logo\"\n src=\"media/logo/stzh-default.svg\"\n alt=\"Logo City Zürich, go to homepage\"\n />\n </stzh-header>\n <div class=\"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding\">\n <stzh-heading\n class=\"stzh-geo-ref-data__heading-heading\"\n curve=\"h2\"\n >\n {this.heading}\n </stzh-heading>\n <stzh-button\n class=\"stzh-geo-ref-data__overlay-close\"\n icon=\"close\"\n iconOnly={true}\n size=\"small\"\n variant=\"tertiary\"\n onClick={this.handleOverlayCloseClick}\n ></stzh-button>\n </div>\n </div>\n\n <div class=\"stzh-geo-ref-data__content\">\n <div\n class=\"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding\"\n ref={(el) => (this.metaWrapperElement = el as HTMLDivElement)}\n >\n <div class=\"stzh-geo-ref-data__filters\">\n <div class=\"stzh-geo-ref-data__filters-toggle\">\n <stzh-chip\n label={this.isViewportMedium ? \"Filter\" : \"\"}\n variant=\"filter\"\n icon=\"filtering\"\n ></stzh-chip>\n </div>\n <div class=\"stzh-geo-ref-data__filters-content\">\n <stzh-chipselect\n label-hidden={true}\n label=\"Tags\"\n data={this.enhancedTags}\n onStzhChange={this.handleFilterChange}\n multiple={true}\n defaultValue={[\"\"]}\n ></stzh-chipselect>\n </div>\n </div>\n <div class=\"stzh-geo-ref-data__search\">\n <stzh-input\n size=\"small\"\n name=\"stzh-datatable-search\"\n onStzhChange={this.handleSearchChange}\n hideOptional={true}\n label=\"Suche\"\n type=\"search\"\n ></stzh-input>\n </div>\n <div class=\"stzh-geo-ref-data__results-toggle\">\n <stzh-chip\n onStzhClick={this.toggleViewMode}\n label={this.viewmode === \"map\" ? \"Liste\" : \"Karte\"}\n icon={this.viewmode === \"map\" ? \"bulleted-list\" : \"map\"}\n variant=\"filter\"\n ></stzh-chip>\n </div>\n </div>\n <div class=\"stzh-geo-ref-data__results-wrapper\">\n <div\n class={`stzh-geo-ref-data__results-map ${\n this.viewmode === \"map\" ? \"active\" : \"inactive\"\n }`}\n >\n <stzh-olmap\n class=\"stzh-geo-ref-data__ol-map\"\n centerMarker={false}\n ref={(el) => (this.mapElement = el as HTMLStzhOlmapElement)}\n ></stzh-olmap>\n <div class=\"stzh-geo-ref-data__map-controls\">\n <stzh-checkbox\n label=\"Treffer an Kartenaussicht anpassen\"\n checked={this.showOnlyResultsForCurrentExtent}\n hideOptional={true}\n onStzhChange={this.handleExtentVisibilityChange}\n ></stzh-checkbox>\n </div>\n </div>\n <div\n class={`stzh-geo-ref-data__results-list ${\n this.viewmode === \"list\" ? \"active\" : \"inactive\"\n }`}\n ref={(el) => (this.resultsListElement = el as HTMLDivElement)}\n >\n {this.finalResults && (\n <Fragment>\n <stzh-text class=\"stzh-geo-ref-data__results-list-heading\">\n {this.finalResults.length} Treffer\n </stzh-text>\n <div class=\"stzh-geo-ref-data__teaser-list\">\n {this.finalResultsPaginatedList.map((item) => (\n <div\n class=\"stzh-poi-teaser\"\n onMouseEnter={() =>\n this.handlePoiTeaserMouseEnter(item)\n }\n onMouseLeave={() =>\n this.handlePoiTeaserMouseLeave(item)\n }\n >\n <a\n class=\"stzh-poi-teaser-link\"\n href={this.baseUrlOverride + item.path}\n ></a>\n <div class=\"stzh-poi-teaser-content\">\n <stzh-heading curve=\"lead\">\n {item.poiname}\n </stzh-heading>\n {item.description && (\n <stzh-text size=\"micro\">\n {item.description}\n </stzh-text>\n )}\n {item.data &&\n item.data.length > 0 &&\n item.data.map((item) => (\n <div class=\"stzh-poi-teaser-list-item\">\n <stzh-icon name={item.icon}></stzh-icon>\n <stzh-text size=\"micro\">\n {item.text}\n </stzh-text>\n </div>\n ))}\n </div>\n <div class=\"stzh-poi-teaser-image\">\n <stzh-ratio ratio={\"1:1\"}></stzh-ratio>\n <div class=\"stzh-poi-teaser-image-inner\">\n <img\n src={this.baseUrlOverride + item.image}\n alt={\"Foto von \" + item.poiname}\n />\n </div>\n </div>\n </div>\n ))}\n </div>\n <div class=\"stzh-geo-ref-data__teaser-load-more\">\n <stzh-button onStzhClick={() => this.loadMore()}>\n Weitere laden\n </stzh-button>\n </div>\n </Fragment>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-geo-ref-data.entry.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,urSAAurS;;ACajtS,MAAM,eAAe,GAAG,mBAAmB,CAAC;MAU/B,UAAU;;;;IAeb,mBAAc,GAAuB,EAAE,CAAC;IAkExC,kBAAa,GAA6B,EAAE,CAAC;IAS7C,4BAAuB,GAAG;MAChC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;MAChD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB,CAAC;IAEM,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;QACnE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,eAAe,IAAI,CAAC,kBAAkB,CAAC,YAAY,KAAK,CAAC;QACxF,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,GAAG,eAAe,IAAI,CAAC,kBAAkB,CAAC,YAAY,KAAK,CAAC;QAChG,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;QAC3C,GAAG,CAAC,UAAU,EAAE,CAAC;OAClB;KACF,CAAC;IAEM,uBAAkB,GAAG;MAC3B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;MAC9C,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;KACjD,CAAC;IA+KM,uBAAkB,GAAG,OAAO,CAAyC;MAC3E,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAC3C,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CACzE,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;OAC1B;WAAM;QACL,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;OAC3B;MACD,MAAM,IAAI,CAAC,6BAA6B,EAAE,CAAC;KAC5C,CAAC;IAEM,iCAA4B,GAAG,CAAC;MACtC,IAAI,CAAC,+BAA+B,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;KACzD,CAAC;IAEM,uBAAkB,GAAG,OAAO,CAAc;MAChD,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE,EAAE;QACzB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;UACrB,OAAO;SACR;QACD,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9D,MAAM,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC;QACvE,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;OAC1B;WAAM;QACL,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;OAC3B;MACD,MAAM,IAAI,CAAC,6BAA6B,EAAE,CAAC;KAC5C,CAAC;IA0DM,mBAAc,GAAG;MACvB,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;QAC3B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;OACxB;WAAM;QACL,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;OACvB;KACF,CAAC;mBArXyC,EAAE;sBAGC,EAAE;sBAGF,EAAE;2BAGd,8BAA8B;yBAGX,EAAE;;6BAQjB,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC;8BAGrD,OAAO;wBAgCX,KAAK;wBACL,KAAK;2CACc,IAAI;wBACN,EAAE;qCACW,EAAE;wCACzB,CAAC;oBAEL,KAAK;;;;;;+BAMF,EAAE;;;EA1CzC,oBAAoB,CAAC,QAAqC;IACxD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;KAC1B;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OAC5C;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;OAC1B;KACF;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;GACF;EAGD,eAAe,CAAC,QAAqC;IACnD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5B;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACvC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;OAC5B;KACF;SAAM;MACL,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC3B;GACF;EAsDO,MAAM,WAAW;IACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;MACxC,OAAO,EAAE,CAAC;KACX;IACD,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAC9C,MAAM,UAAU,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;MACzC,MAAM,UAAU,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;MAC3E,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI;;QACtE,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,0CAAE,WAAW,CAAC;QACnD,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,0CAAE,WAAW,CAAC;QACxD,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,CAAC;QAEzC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAuB,CAAC;OACjD,CAAC,CAAC;KACJ;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;;KAElD;GACF;EAEO,MAAM,WAAW;IACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;MAC1C,OAAO,EAAE,CAAC;KACX;IACD,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;MAC1E,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;MACtC,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;MAClC,OAAO,OAAO,CAAC,KAAK,CAAC;KACtB;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;KAClD;GACF;EAEO,WAAW,CACjB,UAAqD,EACrD,WAAsD;IAEtD,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;MAC7C,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;MACzC,OAAO,EAAE,CAAC;KACX;;IAED,IAAI,YAAmB,CAAC;IACxB,IAAI,WAAkB,CAAC;IAEvB,IAAI,UAAU,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,EAAE;MAC1C,YAAY,GAAG,UAAU,CAAC;MAC1B,WAAW,GAAG,WAAW,CAAC;KAC3B;SAAM;MACL,YAAY,GAAG,WAAW,CAAC;MAC3B,WAAW,GAAG,UAAU,CAAC;KAC1B;;IAED,OAAO,YAAY;OAChB,GAAG,CAAC,IAAI;MACP,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,eAAe,IAAI,eAAe,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;MAC/F,uCAAY,IAAI,GAAK,YAAY,EAAG;KACrC,CAAC;OACD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;MACT,IAAI;QACF,OAAO,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;OACvC;MAAC,OAAO,gBAAgB,EAAE;QACzB,OAAO,CAAC,CAAC;OACV;KACF,CAAC,CAAC;GACN;EAEO,WAAW,CAAC,aAAiC,EAAE,YAAsC;IAC3F,OAAO,aAAa;OACjB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;MACT,IAAI;QACF,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;OAChC;MAAC,OAAO,gBAAgB,EAAE;QACzB,OAAO,CAAC,CAAC;OACV;KACF,CAAC;OACD,GAAG,CAAC,GAAG;MACN,MAAM,OAAO,GAAG,YAAY;SACzB,MAAM,CAAC,IAAI;QACV,IAAI;UACF,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;SACtC;QAAC,OAAO,eAAe,EAAE;UACxB,OAAO,KAAK,CAAC;SACd;OACF,CAAC;SACD,MAAM,CAAC,QAAQ,EAAE,CAAC;MACrB,uCAAY,GAAG,KAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,IAAG;KAC/C,CAAC,CAAC;GACN;EAEO,gBAAgB,CAAC,IAA8B;IACrD,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,IAAIA,8BAAQ,CAAC;MAC9B,QAAQ,EAAE,SAAS;MACnB,OAAO,EAAE;QACP,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,GAAG;OACZ;MACD,QAAQ,EAAE;QACR,EAAE,EAAE,IAAI,CAAC,kBAAkB;QAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB;OAC9B;KACF,CAAC,CAAC;IACH,IAAI,CAAC,OAAO,CAAC,IAAI;MACf,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;KAC5B,CAAC,CAAC;GACJ;EAGD,MAAM,sBAAsB;IAC1B,IAAI,IAAI,CAAC,+BAA+B,EAAE;MACxC,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;MACjE,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;KAC/C;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,sBAAsB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAChD,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACrC;EAED,oBAAoB;IAClB,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACnD,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;GACF;EAEO,MAAM,oBAAoB;IAChC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAEnB,IAAI;MACF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;MACzF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MAC7E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACzC,MAAM,gBAAgB,mCACjB,IAAI,CAAC,SAAS,KACjB,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,EAAE,GAC7C,CAAC;MACF,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;OAC7C;MACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;MACtC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MACtF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC;MACvE,MAAM,IAAI,CAAC,6BAA6B,EAAE,CAAC;MAC3C,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;MAC1B,MAAM,IAAI,CAAC,UAAU,CAAC,sBAAsB,EAAE,CAAC;MAC/C,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;MAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;IAAC,OAAO,YAAY,EAAE;MACrB,OAAO,CAAC,KAAK,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;KAC7C;IAED,UAAU,CAAC;MACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,EAAE,GAAG,CAAC,CAAC;GACT;EAiCO,MAAM,6BAA6B;IACzC,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MAC3C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;KACxC;SAAM,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,EAAE;MAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC;KACjH;SAAM,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,EAAE;MACjD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC3F;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;KACvC;IAED,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAEtF,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACjD;EAEO,QAAQ;IACd,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CACpC,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,mBAAmB,EAC5D,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CACxF,CAAC;IACF,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,mBAAmB,EAAE;MACzE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC1B;IACD,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;GAChF;;;;;;;EASO,MAAM,iBAAiB,CAAC,KAA+B;IAC7D,MAAM,IAAI,CAAC,UAAU,CAAC,oBAAoB,EAAE,CAAC;IAC7C,KAAK;OACF,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;OACxC,OAAO,CAAC,IAAI;MACX,IAAI,CAAC,UAAU;SACZ,aAAa,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;QAC3D,EAAE,EAAE,IAAI,CAAC,KAAK;QACd,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,WAAW;QACtB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE;QAChD,IAAI,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,EAAE;OAC5C,CAAC;SACD,KAAK,EAAE,CAAC;KACZ,CAAC,CAAC;IACL,IAAI,CAAC,IAAI,CAAC,+BAA+B,EAAE;MACzC,IAAI,CAAC,UAAU,CAAC,sBAAsB,EAAE,CAAC,KAAK,EAAE,CAAC;KAClD;GACF;EAUO,MAAM,yBAAyB,CAAC,IAA4B;IAClE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChE,IAAI,MAAM,EAAE;MACV,MAAM,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;KACnD;GACF;EAEO,MAAM,yBAAyB,CAAC,IAA4B;IAClE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChE,IAAI,MAAM,EAAE;MACV,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;KACrD;GACF;;EAID,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,+BAA+B,EAAE,IAAI,CAAC,SAAS;MAC/C,4BAA4B,EAAE,IAAI,CAAC,MAAM;KAC1C,CAAC;IACF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,IAChF,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,oBAAc,IAAI,EAAE,IAAI,CAAC,SAAS,IAChC,mBAAa,KAAK,EAAC,yBAAyB,GAAe,CAC9C,EACf,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,mCAAmC,IAC5C,mCAA2B,IAAI,EAAE,MAAM,EAAC,UAAU,IAChD,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACzB,EACd,WAAK,KAAK,EAAC,+DAA+D,IACxE,oBAAc,KAAK,EAAC,oCAAoC,EAAC,KAAK,EAAC,IAAI,IAChE,IAAI,CAAC,OAAO,CACA,EACf,mBACE,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,uBAAuB,GACxB,CACX,CACF,EAEN,WAAK,KAAK,EAAC,4BAA4B,IACrC,WACE,KAAK,EAAC,oEAAoE,EAC1E,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAE3D,WAAK,KAAK,EAAC,4BAA4B,IACrC,WAAK,KAAK,EAAC,mCAAmC,IAC5C,iBACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,QAAQ,GAAG,EAAE,EAC5C,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,WAAW,GACL,CACT,EACN,WAAK,KAAK,EAAC,oCAAoC,IAC7C,uCACgB,IAAI,EAClB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,QAAQ,EAAE,IAAI,EACd,YAAY,EAAE,CAAC,EAAE,CAAC,GACD,CACf,CACF,EACN,WAAK,KAAK,EAAC,2BAA2B,IACpC,kBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,uBAAuB,EAC5B,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,YAAY,EAAE,IAAI,EAClB,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,QAAQ,GACD,CACV,EACN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,iBACE,WAAW,EAAE,IAAI,CAAC,cAAc,EAChC,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,OAAO,GAAG,OAAO,EAClD,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,eAAe,GAAG,KAAK,EACvD,OAAO,EAAC,QAAQ,GACL,CACT,CACF,EACN,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WAAK,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,UAAU,EAAE,IAC7F,kBACE,KAAK,EAAC,2BAA2B,EACjC,YAAY,EAAE,KAAK,EACnB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAA0B,CAAC,GAC7C,EACd,WAAK,KAAK,EAAC,iCAAiC,IAC1C,qBACE,KAAK,EAAC,oCAAoC,EAC1C,OAAO,EAAE,IAAI,CAAC,+BAA+B,EAC7C,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,CAAC,4BAA4B,GAChC,CACb,CACF,EACN,WACE,KAAK,EAAE,mCAAmC,IAAI,CAAC,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAG,UAAU,EAAE,EAC5F,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAE1D,IAAI,CAAC,YAAY,KAChB,EAAC,QAAQ,QACP,iBAAW,KAAK,EAAC,yCAAyC,IACvD,IAAI,CAAC,YAAY,CAAC,MAAM,aACf,EACZ,WAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,IAAI,KACtC,WACE,KAAK,EAAC,iBAAiB,EACvB,YAAY,EAAE,MAAM,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,EACxD,YAAY,EAAE,MAAM,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAExD,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,GAAM,EAC5E,WAAK,KAAK,EAAC,yBAAyB,IAClC,oBAAc,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAgB,EACvD,IAAI,CAAC,WAAW,IAAI,iBAAW,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAa,EAC1E,IAAI,CAAC,IAAI;MACR,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;MACpB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAChB,WAAK,KAAK,EAAC,2BAA2B,IACpC,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EACxC,iBAAW,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,IAAI,CAAa,CAC3C,CACP,CAAC,CACA,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,kBAAY,KAAK,EAAE,KAAK,GAAe,EACvC,WAAK,KAAK,EAAC,6BAA6B,IACtC,WAAK,GAAG,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,GAAG,IAAI,CAAC,OAAO,GAAI,CAC5E,CACF,CACF,CACP,CAAC,CACE,EACL,IAAI,CAAC,WAAW,KACf,WAAK,KAAK,EAAC,qCAAqC,IAC9C,mBAAa,WAAW,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,oBAA6B,CACxE,CACP,CACQ,CACZ,CACG,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;","names":["Document"],"sources":["src/components/stzh-geo-ref-data/stzh-geo-ref-data.scss?tag=stzh-geo-ref-data&encapsulation=shadow","src/components/stzh-geo-ref-data/stzh-geo-ref-data.tsx"],"sourcesContent":[":host {\n --meta-grid-template-areas: \"filters\" \"search\" \"resultstoggle\";\n --results-grid-template-areas: \"map\" \"list\";\n\n @include mq($from: large) {\n --meta-grid-template-areas: \"filters filters filters filters filters filters filters filters search search search search\";\n --results-grid-template-areas: \"map map map map map map map map list list list list\";\n }\n\n}\n\n.stzh-geo-ref-data {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 899;\n flex-direction: column;\n transition: opacity ease 0.2s;\n background-color: var(--stzh-color-white);\n\n // initially hidden\n display: none;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n\n &--is-open {\n display: flex;\n opacity: 1;\n visibility: visible;\n pointer-events: inherit;\n }\n\n &__content {\n overflow: hidden;\n height: 100%;\n }\n\n &--content-padding {\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n }\n\n &__heading {\n display: flex;\n background-color: var(--stzh-color-secondary20);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n /** Everything meta wrapper like search, filters etc. /\n\n &__meta-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: space(large);\n\n @include spaceCurve('padding-top', 'small');\n @include spaceCurve('padding-bottom', 'small');\n\n @include mq($from: large) {\n @include grid;\n grid-template-areas: var(--meta-grid-template-areas);\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n\n &__filters {\n grid-area: filters;\n flex: none;\n margin-bottom: space(xxsmall);\n }\n\n &__filters-toggle {\n @include mq($from: large) {\n display: none;\n }\n }\n\n &__filters-toggle stzh-chip {\n @include mq($to: medium) {\n --icon-gap: 0;\n }\n }\n\n &__filters-content {\n display: none;\n\n @include mq($from: large) {\n display: block;\n }\n }\n\n &__search {\n grid-area: search;\n width: 100%;\n\n @include mq($from: large) {\n padding-left: 12px;\n }\n }\n\n &__results-toggle {\n grid-area: resultstoggle;\n flex: none;\n margin-bottom: space(xxsmall);\n\n @include mq($from: large) {\n display: none;\n }\n }\n\n /* Everything with results /\n\n &__results-wrapper {\n height: 100%;\n\n @include mq($from: large) {\n @include grid;\n grid-template-areas: var(--results-grid-template-areas);\n --grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n\n &__results-wrapper .inactive {\n @include mq($to: large) {\n visibility: hidden;\n height: 0;\n position: absolute;\n overflow: hidden;\n }\n }\n\n &__results-map {\n grid-area: map;\n position: relative;\n height: 100%;\n }\n\n &__map-controls {\n position: absolute;\n top: space(small);\n left: space(small);\n background-color: var(--stzh-color-white);\n padding: space(xsmall);\n }\n\n &__results-list {\n grid-area: list;\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n padding-bottom: space(large);\n overflow: auto;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: 0;\n padding-right: $containerMarginSmall;\n overflow: auto;\n }\n }\n\n &__results-list-heading {\n margin-bottom: var(--stzh-space-medium);\n }\n\n &__ol-map {\n }\n\n &__teaser-list {\n display: grid;\n gap: var(--stzh-space-medium);\n grid-template-columns: 1fr;\n\n @include mq($from: small) {\n grid-template-columns: 1fr 1fr;\n }\n\n @include mq($from: large) {\n grid-template-columns: 1fr;\n }\n }\n\n &__teaser-load-more {\n display: flex;\n justify-content: center;\n margin-top: space(medium);\n }\n}\n\n/* TEMP - MOVE TO COMPONENT /\n\n.stzh-poi-teaser {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 180px;\n height: 180px;\n background-color: var(--stzh-color-grey10);\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: var(--stzh-color-secondary10);\n }\n\n &-content {\n padding: var(--stzh-space-medium);\n hyphens: auto;\n\n stzh-heading {\n margin-bottom: space(xsmall);\n }\n\n stzh-text {\n --color: var(--stzh-color-grey80);\n }\n }\n\n &-link {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n &-image {\n position: relative;\n overflow: hidden;\n }\n\n &-image-inner {\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &-image-inner img {\n height: 180px;\n }\n\n &-list-item {\n display: flex;\n gap: space(small);\n margin-top: space(xxsmall);\n\n stzh-icon, stzh-text {\n --color: var(--stzh-color-grey80);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport {\n StzhAvailableTag,\n StzhChipselectChangeEvent,\n StzhChipselectItem,\n StzhCombinedGeoRefData,\n StzhGeoRefDataOverlayCloseClickEvent,\n StzhMapGeoRefData,\n StzhPoiGeoRefData,\n} from \"../../index\";\nimport { Document } from \"flexsearch/dist/flexsearch.bundle.min.js\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/\n * @slot logo - Slot for brand logo\n /\n@Component({\n tag: \"stzh-geo-ref-data\",\n styleUrl: \"stzh-geo-ref-data.scss\",\n shadow: true,\n})\nexport class GeoRefData {\n /* Heading for the overlay. /\n @Prop({ reflect: true }) heading: string = \"\";\n\n /* The URL for fetching the card data /\n @Prop({ reflect: true }) mapDataUrl: string = \"\";\n\n /* The URL used for fetching the POI data. /\n @Prop({ reflect: true }) poiDataUrl: string = \"\";\n\n /* Base URL used for all external requests (map, card). /\n @Prop() baseUrlOverride: string = \"https://www.stadt-zuerich.ch\";\n\n /* To make sure all tags are mapped to their identificator, only these will be available. /\n @Prop() availableTags: StzhAvailableTag[] \| string = [];\n private _availableTags: StzhAvailableTag[] = [];\n\n /* Reset tag (the first one). /\n @Prop() resetTag: StzhChipselectItem \| string;\n private _resetTag: StzhChipselectItem;\n\n /* Fields for building the search index. /\n @Prop() searchIndexFields: string[] = [\"title\", \"poiname\", \"street\", \"zip\", \"description\"];\n\n /* Fields for building the search index. /\n @Prop() searchIndexIdField: string = \"poiid\";\n\n @Watch(\"availableTags\")\n availableTagsWatcher(newValue: StzhAvailableTag[] \| string) {\n if (!newValue) {\n this._availableTags = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._availableTags = JSON.parse(newValue);\n } catch (e) {\n this._availableTags = [];\n }\n } else {\n this._availableTags = newValue;\n }\n }\n\n @Watch(\"resetTag\")\n resetTagWatcher(newValue: StzhChipselectItem \| string) {\n if (!newValue) {\n this._resetTag = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._resetTag = JSON.parse(newValue);\n } catch (e) {\n this._resetTag = undefined;\n }\n } else {\n this._resetTag = newValue;\n }\n }\n\n @State() filterActive: boolean = false;\n @State() searchActive: boolean = false;\n @State() showOnlyResultsForCurrentExtent: boolean = true;\n @State() finalResults: StzhCombinedGeoRefData[] = [];\n @State() finalResultsPaginatedList: StzhCombinedGeoRefData[] = [];\n @State() finalResultsPaginationOffset = 0;\n\n @State() viewmode: \"map\" \| \"list\" = \"map\";\n @State() isViewportLarge: boolean;\n @State() isViewportMedium: boolean;\n @State() isInitialized: boolean;\n @State() isOpen: boolean;\n @State() isLoading: boolean;\n @State() numberOfItemsToLoad: number = 20;\n @State() canLoadMore: boolean;\n\n /* Overlay close click event /\n @Event()\n stzhOverlayCloseClick: EventEmitter<StzhGeoRefDataOverlayCloseClickEvent>;\n\n private combinedData: StzhCombinedGeoRefData[];\n private enhancedTags: StzhChipselectItem[];\n private searchIndex: Document;\n\n private filterResults: StzhCombinedGeoRefData[] = [];\n private searchResults: Set<string>;\n\n @Element() element: HTMLStzhGeoRefDataElement;\n private mapElement: HTMLStzhOlmapElement;\n private metaWrapperElement: HTMLDivElement;\n private resultsListElement: HTMLDivElement;\n private resizeObserver: ResizeObserver;\n\n private handleOverlayCloseClick = () => {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.isOpen = false;\n };\n\n private handleResize = async () => {\n if (this.metaWrapperElement && this.metaWrapperElement.clientHeight) {\n this.mapElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n this.resultsListElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n const map = await this.mapElement.getMap();\n map.updateSize();\n }\n };\n\n private mediaChangeHandler = () => {\n this.isViewportLarge = media(\"large\").matches;\n this.isViewportMedium = media(\"medium\").matches;\n };\n\n private async loadMapData(): Promise<StzhMapGeoRefData[]> {\n if (!this.mapDataUrl) {\n console.log(\"No map data URL provided\");\n return [];\n }\n try {\n const response = await fetch(this.mapDataUrl);\n const rawMapData = await response.text();\n const parsedData = new DOMParser().parseFromString(rawMapData, \"text/xml\");\n return Array.from(parsedData.querySelectorAll(\"featureMember\")).map(item => {\n const pos = item.querySelector(\"pos\")?.textContent;\n const poiid = item.querySelector(\"poi_id\")?.textContent;\n const [lat, lon] = pos?.split(\" \") \|\| [];\n\n return { poiid, lat, lon } as StzhMapGeoRefData;\n });\n } catch (error) {\n console.error(\"Error fetching map data:\", error);\n // TODO: add user error (toast)\n }\n }\n\n private async loadPoiData() {\n if (!this.poiDataUrl) {\n console.error(\"No POI data URL provided\");\n return [];\n }\n try {\n const response = await fetch(this.poiDataUrl, { credentials: \"include\" });\n const poiData = await response.json();\n console.log(\"POI data:\", poiData);\n return poiData.items;\n } catch (error) {\n console.error(\"Error fetching POI data:\", error);\n }\n }\n\n private combineData(\n firstArray: StzhMapGeoRefData[] \| StzhPoiGeoRefData[],\n secondArray: StzhMapGeoRefData[] \| StzhPoiGeoRefData[]\n ): StzhCombinedGeoRefData[] {\n if (!firstArray.length \|\| !secondArray.length) {\n console.error(\"Missing data to combine\");\n return [];\n }\n // determine which array is smaller for performance\n let smallerArray: any[];\n let largerArray: any[];\n\n if (firstArray.length < secondArray.length) {\n smallerArray = firstArray;\n largerArray = secondArray;\n } else {\n smallerArray = secondArray;\n largerArray = firstArray;\n }\n // combine arrays based on poiid\n return smallerArray\n .map(item => {\n const matchingItem = largerArray.find(largerArrayItem => largerArrayItem.poiid === item.poiid);\n return { ...item, ...matchingItem };\n })\n .sort((a, b) => {\n try {\n return a.title.localeCompare(b.title); // Sorts alphabetically by the 'name' property\n } catch (noTitleException) {\n return 1;\n }\n });\n }\n\n private enhanceTags(availableTags: StzhAvailableTag[], combinedData: StzhCombinedGeoRefData[]): StzhChipselectItem[] {\n return availableTags\n .sort((a, b) => {\n try {\n a.label.localeCompare(b.label);\n } catch (noLabelException) {\n return 1;\n }\n })\n .map(tag => {\n const counter = combinedData\n .filter(item => {\n try {\n return item.tags.includes(tag.value);\n } catch (noTagsException) {\n return false;\n }\n })\n .length.toString();\n return { ...tag, counter, variant: \"filter\" };\n });\n }\n\n private buildSearchIndex(data: StzhCombinedGeoRefData[]) {\n if (!data.length) {\n return;\n }\n this.searchIndex = new Document({\n tokenize: \"forward\",\n matcher: {\n \"[äà]\": \"a\",\n \"[öó]\": \"o\",\n \"[üûúù]\": \"u\",\n \"[éè]\": \"e\",\n },\n document: {\n id: this.searchIndexIdField,\n index: this.searchIndexFields,\n },\n });\n data.forEach(item => {\n this.searchIndex.add(item);\n });\n }\n\n @Listen(\"stzhMovePanZoom\")\n async mapMovedPannedOrZoomed() {\n if (this.showOnlyResultsForCurrentExtent) {\n const visibleMarkers = await this.mapElement.getVisibleMarkers();\n console.log(\"visibleMarkers\", visibleMarkers);\n }\n }\n\n connectedCallback() {\n this.mediaChangeHandler();\n addMediaChangeListener(this.mediaChangeHandler);\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n this.availableTagsWatcher(this.availableTags);\n this.resetTagWatcher(this.resetTag);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private async initializeAndOpenMap() {\n document.body.classList.add(CLASS_BODY_OPEN);\n this.isLoading = true;\n this.isOpen = true;\n\n try {\n this.combinedData = this.combineData(await this.loadMapData(), await this.loadPoiData());\n this.enhancedTags = this.enhanceTags(this._availableTags, this.combinedData);\n this.buildSearchIndex(this.combinedData);\n const enhancedResetTag = {\n ...this._resetTag,\n counter: this.combinedData.length.toString(),\n };\n if (this._resetTag) {\n this.enhancedTags.unshift(enhancedResetTag);\n }\n this.finalResults = this.combinedData;\n this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n this.canLoadMore = this.finalResults.length > this.numberOfItemsToLoad;\n await this.combineFilterAndSearchResults();\n await this.handleResize();\n await this.mapElement.updateViewToFitMarkers();\n await this.handleResize();\n this.isInitialized = true;\n } catch (mapException) {\n console.error(\"mapException\", mapException);\n }\n\n setTimeout(() => {\n this.isLoading = false;\n }, 500);\n }\n\n private handleFilterChange = async (e: CustomEvent<StzhChipselectChangeEvent>) => {\n if (e.detail.value.length !== 0) {\n this.filterResults = this.combinedData.filter(\n item => item.tags && item.tags.some(tag => e.detail.value.includes(tag))\n );\n this.filterActive = true;\n } else {\n this.filterActive = false;\n }\n await this.combineFilterAndSearchResults();\n };\n\n private handleExtentVisibilityChange = e => {\n this.showOnlyResultsForCurrentExtent = e.detail.checked;\n };\n\n private handleSearchChange = async (e: CustomEvent) => {\n if (e.detail.value !== \"\") {\n if (!this.searchIndex) {\n return;\n }\n const searchResults = this.searchIndex.search(e.detail.value);\n const flatSearchResults = searchResults.flatMap(field => field.result);\n this.searchResults = new Set(flatSearchResults);\n this.searchActive = true;\n } else {\n this.searchActive = false;\n }\n await this.combineFilterAndSearchResults();\n };\n\n private async combineFilterAndSearchResults() {\n if (this.filterActive && !this.searchActive) {\n this.finalResults = this.filterResults;\n } else if (!this.filterActive && this.searchActive) {\n this.finalResults = Array.from(this.searchResults).map(id => this.combinedData.find(item => item.poiid === id));\n } else if (this.filterActive && this.searchActive) {\n this.finalResults = this.filterResults.filter(item => this.searchResults.has(item.poiid));\n } else {\n this.finalResults = this.combinedData;\n }\n\n this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n\n await this.replaceMapMarkers(this.finalResults);\n }\n\n private loadMore() {\n this.finalResultsPaginationOffset++;\n const sliced = this.finalResults.slice(\n this.finalResultsPaginationOffset this.numberOfItemsToLoad,\n this.finalResultsPaginationOffset * this.numberOfItemsToLoad + this.numberOfItemsToLoad\n );\n if (!sliced \|\| !sliced.length \|\| sliced.length < this.numberOfItemsToLoad) {\n this.canLoadMore = false;\n }\n this.finalResultsPaginatedList = this.finalResultsPaginatedList.concat(sliced);\n }\n\n // private async handleExtendVisibility() {\n // if (this.showOnlyResultsForCurrentExtent) {\n // const visibleMarkers = await this.mapElement.getVisibleMarkers();\n // console.log(\"visibleMarkers\", visibleMarkers);\n // }\n // }\n\n private async replaceMapMarkers(items: StzhCombinedGeoRefData[]) {\n await this.mapElement.removeAllIconMarkers();\n items\n .filter(item => !!item.lat && !!item.lon)\n .forEach(item => {\n this.mapElement\n .addIconMarker([parseFloat(item.lat), parseFloat(item.lon)], {\n id: item.poiid,\n title: item.title,\n text: item.description,\n data: item.data,\n imageUri: `${this.baseUrlOverride}${item.image}`,\n href: `${this.baseUrlOverride}${item.path}`,\n })\n .catch();\n });\n if (!this.showOnlyResultsForCurrentExtent) {\n this.mapElement.updateViewToFitMarkers().catch();\n }\n }\n\n private toggleViewMode = () => {\n if (this.viewmode === \"map\") {\n this.viewmode = \"list\";\n } else {\n this.viewmode = \"map\";\n }\n };\n\n private async handlePoiTeaserMouseEnter(item: StzhCombinedGeoRefData) {\n const marker = await this.mapElement.findMarkerById(item.poiid);\n if (marker) {\n await this.mapElement.setIconMarkerActive(marker);\n }\n }\n\n private async handlePoiTeaserMouseLeave(item: StzhCombinedGeoRefData) {\n const marker = await this.mapElement.findMarkerById(item.poiid);\n if (marker) {\n await this.mapElement.setIconMarkerInactive(marker);\n }\n }\n\n // render chipselect\n\n render() {\n const classes = {\n \"stzh-geo-ref-data\": true,\n \"stzh-geo-ref-data--is-loading\": this.isLoading,\n \"stzh-geo-ref-data--is-open\": this.isOpen,\n };\n return (\n <Host>\n <div class=\"stzh-geo-ref-data__trigger\" onClick={() => this.initializeAndOpenMap()}>\n <slot name=\"trigger\"></slot>\n </div>\n <stzh-overlay open={this.isLoading}>\n <stzh-loader label=\"Daten werden geladen...\"></stzh-loader>\n </stzh-overlay>\n <div class={classes}>\n <div class=\"stzh-geo-ref-data__header-wrapper\">\n <stzh-header hide-metabar={true} sticky=\"disabled\">\n <slot name=\"logo\" slot=\"logo\"></slot>\n </stzh-header>\n <div class=\"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding\">\n <stzh-heading class=\"stzh-geo-ref-data__heading-heading\" curve=\"h2\">\n {this.heading}\n </stzh-heading>\n <stzh-button\n class=\"stzh-geo-ref-data__overlay-close\"\n icon=\"close\"\n iconOnly={true}\n size=\"small\"\n variant=\"tertiary\"\n onClick={this.handleOverlayCloseClick}\n ></stzh-button>\n </div>\n </div>\n\n <div class=\"stzh-geo-ref-data__content\">\n <div\n class=\"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding\"\n ref={el => (this.metaWrapperElement = el as HTMLDivElement)}\n >\n <div class=\"stzh-geo-ref-data__filters\">\n <div class=\"stzh-geo-ref-data__filters-toggle\">\n <stzh-chip\n label={this.isViewportMedium ? \"Filter\" : \"\"}\n variant=\"filter\"\n icon=\"filtering\"\n ></stzh-chip>\n </div>\n <div class=\"stzh-geo-ref-data__filters-content\">\n <stzh-chipselect\n label-hidden={true}\n label=\"Tags\"\n data={this.enhancedTags}\n onStzhChange={this.handleFilterChange}\n multiple={true}\n defaultValue={[\"\"]}\n ></stzh-chipselect>\n </div>\n </div>\n <div class=\"stzh-geo-ref-data__search\">\n <stzh-input\n size=\"small\"\n name=\"stzh-datatable-search\"\n onStzhChange={this.handleSearchChange}\n hideOptional={true}\n label=\"Suche\"\n type=\"search\"\n ></stzh-input>\n </div>\n <div class=\"stzh-geo-ref-data__results-toggle\">\n <stzh-chip\n onStzhClick={this.toggleViewMode}\n label={this.viewmode === \"map\" ? \"Liste\" : \"Karte\"}\n icon={this.viewmode === \"map\" ? \"bulleted-list\" : \"map\"}\n variant=\"filter\"\n ></stzh-chip>\n </div>\n </div>\n <div class=\"stzh-geo-ref-data__results-wrapper\">\n <div class={`stzh-geo-ref-data__results-map ${this.viewmode === \"map\" ? \"active\" : \"inactive\"}`}>\n <stzh-olmap\n class=\"stzh-geo-ref-data__ol-map\"\n centerMarker={false}\n ref={el => (this.mapElement = el as HTMLStzhOlmapElement)}\n ></stzh-olmap>\n <div class=\"stzh-geo-ref-data__map-controls\">\n <stzh-checkbox\n label=\"Treffer an Kartenaussicht anpassen\"\n checked={this.showOnlyResultsForCurrentExtent}\n hideOptional={true}\n onStzhChange={this.handleExtentVisibilityChange}\n ></stzh-checkbox>\n </div>\n </div>\n <div\n class={`stzh-geo-ref-data__results-list ${this.viewmode === \"list\" ? \"active\" : \"inactive\"}`}\n ref={el => (this.resultsListElement = el as HTMLDivElement)}\n >\n {this.finalResults && (\n <Fragment>\n <stzh-text class=\"stzh-geo-ref-data__results-list-heading\">\n {this.finalResults.length} Treffer\n </stzh-text>\n <div class=\"stzh-geo-ref-data__teaser-list\">\n {this.finalResultsPaginatedList.map(item => (\n <div\n class=\"stzh-poi-teaser\"\n onMouseEnter={() => this.handlePoiTeaserMouseEnter(item)}\n onMouseLeave={() => this.handlePoiTeaserMouseLeave(item)}\n >\n <a class=\"stzh-poi-teaser-link\" href={this.baseUrlOverride + item.path}></a>\n <div class=\"stzh-poi-teaser-content\">\n <stzh-heading curve=\"lead\">{item.poiname}</stzh-heading>\n {item.description && <stzh-text size=\"micro\">{item.description}</stzh-text>}\n {item.data &&\n item.data.length > 0 &&\n item.data.map(item => (\n <div class=\"stzh-poi-teaser-list-item\">\n <stzh-icon name={item.icon}></stzh-icon>\n <stzh-text size=\"micro\">{item.text}</stzh-text>\n </div>\n ))}\n </div>\n <div class=\"stzh-poi-teaser-image\">\n <stzh-ratio ratio={\"1:1\"}></stzh-ratio>\n <div class=\"stzh-poi-teaser-image-inner\">\n <img src={this.baseUrlOverride + item.image} alt={\"Foto von \" + item.poiname} />\n </div>\n </div>\n </div>\n ))}\n </div>\n {this.canLoadMore && (\n <div class=\"stzh-geo-ref-data__teaser-load-more\">\n <stzh-button onStzhClick={() => this.loadMore()}>Weitere laden</stzh-button>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-input.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { h as hasSlot } from './utils-4f9b3f37.js';
 import { S as StzhInputDescription } from './stzh-input-description-766446dc.js';
 import './string-utils-e252977e.js';
-const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-color-secondary60);--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-color-primary);--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-color-secondary60);--hover-border-color:var(--stzh-color-secondary50);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::-moz-selection{background:var(--text-selection-background-color)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";
+const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-color-secondary60);--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-color-primary);--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-color-secondary60);--hover-border-color:var(--stzh-color-secondary50);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::-moz-selection{background:var(--text-selection-background-color)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.no-label-truncate.sc-stzh-input{white-space:normal;overflow:visible;text-overflow:initial;word-wrap:break-word}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";
 let inputCounter = 0;
 const StzhInput = class {
@@ -120,6 +120,7 @@ const StzhInput = class {
     this.autocomplete = "on";
     this.noAutocomplete = false;
     this.label = "";
+    this.noLabelTruncate = false;
     this.labelHidden = false;
     this.size = "default";
     this.a11yDescribedby = "";
@@ -214,7 +215,10 @@ const StzhInput = class {
       [`stzh-input--size-${this.size}`]: !!this.size,
       [`stzh-input--type-${this.type}`]: !!this.type,
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { class: classes }, h("label", { class: "stzh-input__label", htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { class: "stzh-input__marker" }, h("span", { class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+    return (h(Host, { "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { class: classes }, h("label", { class: {
+        "stzh-input__label": true,
+        "no-label-truncate": this.noLabelTruncate,
+      }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { class: "stzh-input__marker" }, h("span", { class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
       ? this.localization.$globals.requiredFieldMarker
       : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-input__marker-text" }, this.required
       ? this.localization.$globals.requiredFieldText

package/dist/esm/stzh-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-input.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n --text-selection-background-color: #{$colorSecondary30};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n @include input-description;\n\n ::selection {\n background: var(--text-selection-background-color);\n }\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) &&\n (this.type === \"search\" \|\| this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(this._error?.length > 0 \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-input.entry.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,w9ZAAw9Z;;ACS7+Z,IAAI,YAAY,GAAG,CAAC,CAAC;MAeR,SAAS;;;;;;;IAsKZ,mBAAc,GAAY,KAAK,CAAC;IAOhC,iBAAY,GAAG,OAAO,KAAiB;MAC7C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;MAEnB,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;MAE/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;IAEM,oCAA+B,GAAG;MACxC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KACxC,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;;MAE/B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;;;;;;;;KAStC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAE9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAiB;MACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAE9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;OACpB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;;MAEjC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAEpC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAC;;qBAxQ2B,KAAK;;gBAOhC,MAAM;gBAGe,CAAC;;;oBASqB,KAAK;oBAGL,KAAK;oBAGL,KAAK;qBAGJ,KAAK;wBAGF,KAAK;;;;iBAYb,EAAE;wBAGK,EAAE;;;;;mBAgBN,KAAK;oBAGJ,KAAK;;wBAYnB,IAAI;0BAGD,KAAK;iBAGf,EAAE;2BAGS,KAAK;uBAGT,KAAK;gBAGiB,SAAS;2BAGK,EAAE;;;;EAuBrE,aAAa,CAAC,KAAY;IACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACxD,qBAAqB,CAAC;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,CAAC,CAAC;KACJ;GACF;EAGD,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,KAAK,EAAE,CAAC;GAC/B;EAGD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;UACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;OACF;KACF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;GACF;EAGD,WAAW,CAAC,QAAgB;IAC1B,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExF,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChD,MAAM,IAAI,KAAK,CAAC,QAAQ,QAAQ,gBAAgB,CAAC,CAAC;KACnD;GACF;EAOO,iBAAiB;IACvB,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC,CAAC;GACtE;EAoGO,cAAc;IACpB,QACE,gBACE,KAAK,EAAC,+CAA+C,EACrD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAyB,CAAC,EACnD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACZ;GACH;EAEO,WAAW;IACjB,QACE,aACE,KAAK,EAAC,4CAA4C,EAClD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,EAC5C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,YAAY,uBAC1C,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,SAAS,sBACzC,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF;GACH;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;GACF;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,OAAO,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;IAC9C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC;IAEpD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KAChG;GACF;EAED,MAAM;;IACJ,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAChG,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,CAAC;IAE5E,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,8BAA8B,EAC5B,mBAAmB;QACnB,IAAI,CAAC,IAAI,KAAK,QAAQ;SACrB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;MACrE,6BAA6B,EAAE,eAAe;MAC9C,kCAAkC,EAAE,mBAAmB;MACvD,uBAAuB,EAAE,SAAS;MAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;MACrC,wBAAwB,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;MACnD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,uBAAuB,EAAE,IAAI,CAAC,MAAM;MACpC,2BAA2B,EAAE,CAAC,IAAI,CAAC,MAAM;MACzC,0BAA0B,EAAE,IAAI,CAAC,SAAS;MAC1C,8BAA8B,EAAE,CAAC,IAAI,CAAC,SAAS;MAC/C,8BAA8B,EAAE,IAAI,CAAC,WAAW;MAChD,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC9C,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/C,CAAC;IAEF,QACE,EAAC,IAAI,kBACS,IAAI,CAAC,OAAO,IAAI,SAAS,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,eACd,IAAI,CAAC,MAAM,IAEtB,WAAK,KAAK,EAAE,OAAO,IACjB,aACE,KAAK,EAAE;QACL,mBAAmB,EAAE,IAAI;QACzB,mBAAmB,EAAE,IAAI,CAAC,eAAe;OAC1C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,EACvC,CAAC,IAAI,CAAC,YAAY,KACjB,YAAM,KAAK,EAAC,oBAAoB,IAC9B,YAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,IACvD,IAAI,CAAC,QAAQ;QACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB;QAC9C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAC7C,EACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,IAAI,CAAC,QAAQ;QACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB;QAC5C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAC3C,CACF,CACR,CACK,EACR,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,EAC3D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IACnE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;OACjE,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAClD,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAM,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,+BAA+B,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAC3B,IACb,IAAI,CAAC,MAAM,IACb,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,gBAAgB,mBACvC,IAAI,CAAC,OAAO,GACd,KAEf,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,KAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,EACL,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,IAAI,IAAI,CAAC,WAAW,MAC3C,EAAC,oBAAoB,IACnB,WAAW,EAAC,YAAY,EACxB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACH,CACG,CACD,EACP;GACH;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n --text-selection-background-color: #{$colorSecondary30};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n @include input-description;\n\n ::selection {\n background: var(--text-selection-background-color);\n }\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &.no-label-truncate {\n white-space: normal;\n overflow: visible;\n text-overflow: initial;\n word-wrap: break-word;\n }\n \n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true,\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" =\n \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be truncate or not /\n @Prop() noLabelTruncate: boolean = false; \n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n /* Whether to show the password or not /\n @State() showPassword: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onTogglePasswordVisibilityClick = async () => {\n this.showPassword = !this.showPassword;\n };\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n };\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event,\n });\n };\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={el => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.showPassword ? \"text\" : this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\":\n buttonRightSlotUsed \|\|\n this.type === \"search\" \|\|\n (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label \n class={{\n \"stzh-input__label\": true,\n \"no-label-truncate\": this.noLabelTruncate,\n }} \n htmlFor={this.inputId}\n >\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional && (\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\" ? (\n (!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled) &&\n (this.type === \"search\" \|\| this.type === \"password\") ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n onClick={this.onTogglePasswordVisibilityClick}\n disabled={this.disabled \|\| this.readonly}\n ></stzh-button>\n ) : this.filled ? (\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n ) : (\n <slot name=\"button-right\"></slot>\n )\n ) : (\n <slot name=\"button-right\"></slot>\n )}\n </div>\n {(this._error?.length > 0 \|\| this.description) && (\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/{stzh-chipgroup_2.entry.js → stzh-message.entry.js} RENAMED Viewed

@@ -1,20 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement, c as createEvent } from './index-e3050b18.js';
-const stzhChipgroupCss = ".sc-stzh-chipgroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipgroup-h{display:none}.sc-stzh-chipgroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h *.sc-stzh-chipgroup,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::before,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipgroup-h .has-focus.sc-stzh-chipgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup{outline-style:none !important}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup::-moz-focus-inner{border:0 !important}.stzh-chipgroup.sc-stzh-chipgroup{display:flex;gap:var(--stzh-space-medium)}";
-const StzhChipgroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const classes = {
-      "stzh-chipgroup": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
-  }
-  get element() { return getElement(this); }
-};
-StzhChipgroup.style = stzhChipgroupCss;
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
 const stzhMessageCss = ".sc-stzh-message-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-xsmall)}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";
@@ -66,6 +50,6 @@ const StzhMessage = class {
 };
 StzhMessage.style = stzhMessageCss;
-export { StzhChipgroup as stzh_chipgroup, StzhMessage as stzh_message };
+export { StzhMessage as stzh_message };
-//# sourceMappingURL=stzh-chipgroup_2.entry.js.map
+//# sourceMappingURL=stzh-message.entry.js.map

package/dist/esm/stzh-message.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"stzh-message.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,u8NAAu8N;;MC0Bj9N,WAAW;;;;;IA2Cd,uBAAkB,GAAG;MAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb,CAAA;iBA3CuB,EAAE;uBAGI,EAAE;gBAG0C,MAAM;qBAGnD,KAAK;;gBAcT,IAAI;;EAG7B,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAGD,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAMD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,gCAAgC,EAAE,IAAI,CAAC,SAAS;MAChD,CAAC,sBAAsB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACjD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACtB,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,iBACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EACF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,kBAAkB;WACvC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAyB;WACpD,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,0BAA0B;WACrD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,gBAAgB,GAEnC,CACT,EACN,WAAK,KAAK,EAAC,4BAA4B,IACrC,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjD,EACN,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,eAAa,CAChD,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF,EAEL,CAAC,IAAI,CAAC,SAAS;MACd,mBACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,WAAW,GACH,CAEb,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n --background-color: #{$colorGrey20};\n --icon-color: #{$colorInfo70};\n --close-color: #{$colorGrey90};\n --label-color: #{$colorInfo70};\n --description-color: #{$colorGrey90};\n\n &[type=\"success\"] {\n --label-color: #{$colorSuccess70};\n --icon-color: #{$colorSuccess70};\n --background-color: #{$colorSuccess20};\n }\n\n &[type=\"warning\"] {\n --label-color: #{$colorWarning90};\n --icon-color: #{$colorWarning90};\n --background-color: #{$colorWarning20};\n }\n\n &[type=\"error\"] {\n --label-color: #{$colorError70};\n --icon-color: #{$colorError70};\n --background-color: #{$colorError20};\n }\n}\n\n.stzh-message {\n position: relative;\n display: flex;\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n border-radius: #{$buttonBorderRadius};\n\n &__content {\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n @include spaceCurve('padding-right', 'medium');\n @include spaceCurve('gap', 'small');\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding-left: space('medium');\n\n @include mq($from: small) {\n flex-direction: row;\n align-items: flex-start;\n }\n\n @include mq($from: medium) {\n padding-left: space('large');\n }\n }\n\n &__icon-wrapper {\n display: flex;\n flex-shrink: 0;\n }\n\n &__icon {\n --size: #{iconSize('large')};\n color: var(--icon-color);\n }\n\n &__text-wrapper {\n @include mq($from: small) {\n flex-grow: 1;\n }\n }\n\n &__label {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: var(--label-color);\n\n &:not(:empty) {\n margin-bottom: var(--stzh-space-xsmall);\n }\n }\n\n &__description {\n @include fontCurve('p1');\n color: var(--description-color);\n }\n\n &__description:not(:empty) + &__link:not(:empty) {\n @include spaceCurve('margin-top', 'small');\n }\n\n &__close[variant=\"tertiary\"] {\n --color: var(--close-color);\n\n position: absolute;\n top: 0;\n right: 0;\n }\n\n /* Only label variant */\n\n &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n margin-top: space('xxsmall');\n margin-bottom: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method,\n State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n tag: \"stzh-message\",\n styleUrl: \"stzh-message.scss\",\n scoped: true\n})\nexport class StzhMessage {\n /** Label (slot can also be used as alternative) */\n @Prop() label: string = \"\";\n\n /** Description (use instead of default slot) */\n @Prop() description: string = \"\";\n\n /** Type */\n @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n /** Whether to hide close button */\n @Prop() hideClose: boolean = false;\n\n /** Translation strings. */\n @Prop() localization: StzhMessageLocalizedText;\n\n /** Message open event */\n @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n /** Message close event */\n @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n @Element() element: HTMLStzhMessageElement;\n\n /** Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-message\"\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-message\"\n });\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-message\": true,\n \"stzh-message--has-close-hidden\": this.hideClose,\n [`stzh-message--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host hidden={!this.open}>\n <div class={classes}>\n <div class=\"stzh-message__content\">\n <div class=\"stzh-message__icon-wrapper\">\n <stzh-icon\n class=\"stzh-message__icon\"\n name={\n this.type === 'info' && \"info-help-filled\"\n || this.type === 'success' && \"checkmark-circle-filled\"\n || this.type === 'warning' && \"important-warning-filled\"\n || this.type === 'error' && \"warning-filled\"\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-message__text-wrapper\">\n <div class=\"stzh-message__label\">\n {this.label ? this.label : <slot name=\"label\"></slot>}\n </div>\n <div class=\"stzh-message__description\">\n {this.description ? this.description : <slot></slot>}\n </div>\n <div class=\"stzh-message__link\">\n <slot name=\"link\"></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose &&\n <stzh-button\n class=\"stzh-message__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}