diff --git a/dist/samples/ui-kit-customization/app/index.html b/dist/samples/ui-kit-customization/app/index.html new file mode 100644 index 00000000..f991f28b --- /dev/null +++ b/dist/samples/ui-kit-customization/app/index.html @@ -0,0 +1,241 @@ + + + + + + + + + + +
+
+
+
+
+
+
+
+

Select to truncate the place name and address to fit + on one line

+
+
350px +
+
+
+

Content configuration

+
+
+ +
+
+
+
+

CSS Style Properties

+
+ +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ + +
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + diff --git a/dist/samples/ui-kit-customization/app/index.ts b/dist/samples/ui-kit-customization/app/index.ts new file mode 100644 index 00000000..47bbc3f6 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/index.ts @@ -0,0 +1,366 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +const searchPlace = document.querySelector('gmp-place-autocomplete') as any; +const componentType = document.getElementById("component") as any; +const layoutOrientation = document.getElementById("orientation") as any; + +const widgetContainer = document.querySelector(".widget-container") as any; +const contentConfig = document.querySelectorAll(".content-config") as any; +const contentElemContainer = document.querySelector( + ".content-element-container") as any; +const contentElem = document.querySelectorAll(".content-element") as any; +const contentsExtra = document.querySelectorAll('.extra-content') as any; + + +const styleColors = document.querySelectorAll("input[type='color']") as any; +const styleText = document.querySelectorAll(".style-config input[type='text']") as any; +const placeId = document.getElementById("place-id") as any; +const widthSlider = document.getElementById("width-slider") as any; +const truncationControl = document.getElementById("truncationpreferred") as any; +const styleReset = document.querySelectorAll(".reset") as any; + +let settings = { + "placeId": "ChIJ3S-JXmauEmsRUcIaWtf4MzE", + "element": "gmp-place-details-compact", + "orientation": "VERTICAL", + "all": true, + "standard": false, + "custom": false, + "contentType": "all", + "truncationPreferred": false, + "contents": { + "media": true, + "address": true, + "rating": true, + "type": true, + "price": true, + "accessible-entrance-icon": true, + "open-now-status": true, + "attribution": true + }, + "extraContents": { + "website": true, + "phone-number": true, + "opening-hours": true, + "summary": true, + "type-specific-highlights": true, + "reviews": true, + "plus-code": true, + "feature-list": true + } +}; + +let customizedStyle = { + "--gmp-mat-color-info": "", + "--gmp-mat-color-negative": "", + "--gmp-mat-color-neutral-container": "", + "--gmp-mat-color-on-secondary-container": "", + "--gmp-mat-color-on-surface": "", + "--gmp-mat-color-surface": "", + "--gmp-mat-color-on-surface-variant": "", + "--gmp-mat-color-outline-decorative": "", + "--gmp-mat-color-positive": "", + "--gmp-mat-color-primary": "", + "--gmp-mat-color-secondary-container": "", + "--gmp-mat-color-disabled-surface": "", + "--gmp-mat-font-body-medium": "", + "--gmp-mat-font-body-small": "", + "--gmp-mat-font-family": "", + "--gmp-mat-font-headline-medium": "", + "--gmp-mat-font-label-large": "", + "--gmp-mat-font-title-small": "", + "--gmp-mat-color-on-neutral-container": "", + "--gmp-mat-color-on-positive-container": "", + "--gmp-mat-color-positive-container": "", + "--gmp-mat-font-display-small": "", + "background-color": "", + "border": "", + "border-radius": "", + "font-size": "" +} + +let placeElement, placeRequest, gmpPlaceAll, gmpPlaceStandard, gmpContentConfig, + gmpContentConfigFull; + + +async function init() { + await google.maps.importLibrary("places"); + + placeRequest = document.createElement('gmp-place-details-place-request'); + gmpPlaceAll = document.createElement('gmp-place-all-content'); + gmpPlaceStandard = document.createElement('gmp-place-standard-content'); + gmpContentConfig = document.createElement('gmp-place-content-config'); + + initAccordion(); + detailsConstructor(); //Construct the place details element + initSearchPlace(); //Initialize Autocomplete search + widgetSelector(); //Handlers for controls + styleCustomization(); //css properties +} + +/* style properties accordion */ +function initAccordion(){ + let accordions = document.getElementsByClassName('accordion'); + Array.from(accordions).forEach((item) => { + item.addEventListener('click', () => { + item.classList.toggle('active'); + let panel = item.nextElementSibling as HTMLElement | null; + if(panel){ + if (panel.style.display === 'grid') { + panel.style.display = 'none'; + } else { + panel.style.display = 'grid'; + } + } + }); + + }); +} + +/* Initialize Autocomplete for searching places */ +function initSearchPlace() { + searchPlace.addEventListener('gmp-select', ({ + placePrediction + }) => { + placePrediction.toPlace().fetchFields({ + fields: ['id'] + }).then((place) => { + placeId.value = place.place.id; + settings.placeId = placeId.value; + updateWidget(); + }); + }); + +} + +function widgetSelector() { + /* Place ID input */ + placeId.addEventListener("input", () => { + settings.placeId = placeId.value; + updateWidget(); + }); + + /* Select a component */ + componentType.addEventListener("change", () => { + settings.element = componentType.value; + + if (componentType.value == "gmp-place-details") { + layoutOrientation.disabled = + true; //horizontal orientation is not available for full version for now + settings.truncationPreferred = false; + truncationControl.disabled = true; + if (settings.custom) { + //display extra content elements config for full version + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + } else { + layoutOrientation.disabled = false; + settings.truncationPreferred = false; + truncationControl.disabled = false; + if (settings.custom) { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } + } + detailsConstructor(); + }); + + /* Select widget orientation */ + layoutOrientation.addEventListener("change", () => { + settings.orientation = layoutOrientation.value; + updateWidget(); + }); + + /* Apply Truncation to widget */ + truncationControl.addEventListener("change", () => { + settings.truncationPreferred = truncationControl.checked; + updateWidget(); + }); + + /* Switch between Standard, All, Custom radio buttons */ + contentConfig.forEach((config) => { + config.addEventListener("change", (event) => { + switch (event.target.value) { + case 'standard': + contentElemContainer.style.display = "none"; + settings.all = false; + settings.standard = true; + settings.custom = false; + break; + case 'all': + contentElemContainer.style.display = "none"; + settings.all = true; + settings.standard = false; + settings.custom = false; + break; + case 'custom': + contentElemContainer.style.display = "grid"; + settings.all = false; + settings.standard = false; + settings.custom = true; + if (settings.element == "gmp-place-details-compact") { + contentsExtra.forEach((item) => { + item.style.display = "none"; + }); + } else if (settings.element == "gmp-place-details") { + contentsExtra.forEach((item) => { + item.style.display = "block"; + }); + } + break; + } + updateWidget(); + }); + }); + + contentElem.forEach((element) => { + element.addEventListener("change", (event) => { + settings.contents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + + contentsExtra.forEach((element) => { + element.addEventListener("change", (event) => { + settings.extraContents[event.target.value] = event.target.checked; + updateWidget(); + }); + }); + +} + +function styleCustomization() { + styleColors.forEach((style) => { + style.addEventListener("input", (event) => { + customizedStyle[event.target.id] = event.target.value; + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + + styleReset.forEach((item) => { + item.addEventListener("click", (event) => { + event.preventDefault(); + // @ts-ignore + document.getElementById(event.target.dataset.style).value = + "#000000"; + placeElement.style.removeProperty(event.target.dataset.style); + }); + + }); + + styleText.forEach((style) => { + style.addEventListener("input", (event) => { + placeElement.style.setProperty(event.target.id, event.target + .value); + }); + }); + + widthSlider.addEventListener("input", (event) => { + placeElement.style.width = `${event.target.value}px`; + // @ts-ignore + document.getElementById("width-output").innerHTML = + `${event.target.value}px`; + }); +} + + + +/* Construct Place Details widgets */ +function detailsConstructor() { + /* Create the Element(compact or full) */ + placeElement = document.createElement(settings.element); + updateWidget(); +} + + +/* Update the widget */ +function updateWidget() { + placeRequest.place = settings.placeId; + placeElement.orientation = settings.orientation; + placeElement.truncationPreferred = settings.truncationPreferred; + + widgetContainer.innerHTML = ''; + widgetContainer.appendChild(placeElement); + + placeElement.innerHTML = ''; + placeElement.appendChild(placeRequest); + + if (placeElement.contains(gmpPlaceStandard)) { + placeElement.removeChild(gmpPlaceStandard) + } + if (placeElement.contains(gmpPlaceAll)) { + placeElement.removeChild(gmpPlaceAll) + } + if (placeElement.contains(gmpContentConfig)) { + placeElement.removeChild(gmpContentConfig) + } + + //Configure elements for compact layout + gmpContentConfig.innerHTML = ''; + for (let property in settings.contents) { + if (settings.contents[property]) { + //include content + if (!gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.appendChild(document.createElement( + `gmp-place-${property}`)); + } + } else { + //remove content + if (gmpContentConfig.querySelector(`gmp-place-${property}`)) { + gmpContentConfig.removeChild(gmpContentConfig.querySelector( + `gmp-place-${property}`)); + } + } + } + + //Configure elements for full layout + gmpContentConfigFull = gmpContentConfig.cloneNode(true); + for (let property in settings.extraContents) { + if (settings.extraContents[property]) { + //include content + if (!gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.appendChild(document.createElement( + `gmp-place-${property}`)); + } + } else { + //remove content + if (gmpContentConfigFull.querySelector(`gmp-place-${property}`)) { + gmpContentConfigFull.removeChild(gmpContentConfigFull.querySelector( + `gmp-place-${property}`)); + } + } + } + + if (settings.all) { + placeElement.appendChild(gmpPlaceAll); + } + + if (settings.standard) { + placeElement.appendChild(gmpPlaceStandard); + } + + if (settings.custom) { + if (settings.element == "gmp-place-details-compact") { + placeElement.appendChild(gmpContentConfig); + } + + if (settings.element == "gmp-place-details") { + placeElement.appendChild(gmpContentConfigFull); + } + + } + + +} + + +init(); +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/app/style.css b/dist/samples/ui-kit-customization/app/style.css new file mode 100644 index 00000000..360467c0 --- /dev/null +++ b/dist/samples/ui-kit-customization/app/style.css @@ -0,0 +1,198 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_ui_kit_customization] */ +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; +} + +body { + font: 400 16px / 24px Google Sans, sans-serif; +} + +h1 { + font-size: 1rem; +} + +input[type="text"], +select { + border: 1px solid #ccc; + padding: 5px 3px; + border-radius: 5px; + width: 100%; +} + +input[type="text"] { + width: 97%; +} + +label { + display: block; + color: #4a5568; + font-size: 0.8rem; + margin: 8px 0 3px 0; +} + +p.note { + color: #4a5568; + font-size: 0.8rem; + line-height: 0.8rem; + margin: 0; +} + +hr { + border: 1px solid #eee; + border-radius: 50%; +} + +a.reset, +span { + color: #4a5568; + font-size: 0.7rem; +} + +#container { + display: flex; + gap: 30px; + align-items: flex-start; +} + +.controls { + width: 40%; + max-height: 1000px; + overflow: scroll; +} + +section { + margin: 10px 0px; + padding: 0 0 5px 0; +} + +gmp-place-autocomplete { + display: inline-block; + width: 100%; + height: 32px; +} + +.content-element-container { + padding-left: 20px; + display: none; + grid-template-columns: auto auto; +} + +.content-element-container div { + display: grid; + grid-template-columns: auto auto; +} + +.content-element-container label { + margin: 0; +} + +.extra-content { + display: none; +} + +.content-elements, +.style-config section { + display: grid; + grid-template-columns: auto auto; +} + +.style-config label { + display: block; + font-size: 0.7rem; + line-height: 15px; + margin-right: 15px; +} + +.style-config .color-wrapper { + display: inline-block; + width: 50px; + height: 27px; + overflow: hidden; + vertical-align: middle; + margin-right: 5px; +} + +.style-config input[type="color"] { + display: block; + width: 100%; + height: 100%; + border: none; +} + +.style-config .reset { + display: inline-block; + vertical-align: middle; +} + +.style-config input[type="text"] { + display: block; + width: 80%; + margin-top: 4px; +} + +.style-config { + row-gap: 10px; +} + +.widget-container { + margin: 20px 0; + width: auto; +} + +.contents { + width: 50%; +} + +gmp-place-details-compact, +gmp-place-details { + width: 350px; + margin: 0 auto 10px auto; +} + +.accordion { + background-color: #e8f0fe; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + text-align: left; + border: none; + border-bottom: 1px solid #fff; + outline: none; + transition: 0.4s; +} + +.accordion:after { + content: '\002B'; + color: #777; + font-weight: bold; + float: right; + margin-left: 5px; +} + +.accordion.active:after { + content: '\002D'; +} + +.accordion.active, .accordion:hover { + background-color: #ccc; +} + +.style-config section.panel { + padding: 0 18px; + background-color: white; + display: none; + overflow: hidden; + transition: 0.2s ease-out; +} +/* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/dist/assets/index-BUHsTvap.js b/dist/samples/ui-kit-customization/dist/assets/index-BUHsTvap.js deleted file mode 100644 index 7978c2d1..00000000 --- a/dist/samples/ui-kit-customization/dist/assets/index-BUHsTvap.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))C(a);new MutationObserver(a=>{for(const o of a)if(o.type==="childList")for(const y of o.addedNodes)y.tagName==="LINK"&&y.rel==="modulepreload"&&C(y)}).observe(document,{childList:!0,subtree:!0});function s(a){const o={};return a.integrity&&(o.integrity=a.integrity),a.referrerPolicy&&(o.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?o.credentials="include":a.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function C(a){if(a.ep)return;a.ep=!0;const o=s(a);fetch(a.href,o)}})();/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */const S=document.querySelector("gmp-place-autocomplete"),h=document.getElementById("component"),m=document.getElementById("orientation"),b=document.querySelector(".widget-container"),q=document.querySelectorAll(".content-config"),E=document.querySelector(".content-element-container"),P=document.querySelectorAll(".content-element"),d=document.querySelectorAll(".extra-content"),I=document.querySelectorAll("input[type='color']"),w=document.querySelectorAll(".style-config input[type='text']"),g=document.getElementById("place-id"),x=document.getElementById("width-slider"),u=document.getElementById("truncationpreferred"),$=document.querySelectorAll(".reset");let e={placeId:"ChIJ3S-JXmauEmsRUcIaWtf4MzE",element:"gmp-place-details-compact",orientation:"VERTICAL",all:!0,standard:!1,custom:!1,truncationPreferred:!1,contents:{media:!0,address:!0,rating:!0,type:!0,price:!0,"accessible-entrance-icon":!0,"open-now-status":!0,attribution:!0},extraContents:{website:!0,"phone-number":!0,"opening-hours":!0,summary:!0,"type-specific-highlights":!0,reviews:!0,"plus-code":!0,"feature-list":!0}},A={"--gmp-mat-color-info":"","--gmp-mat-color-negative":"","--gmp-mat-color-neutral-container":"","--gmp-mat-color-on-secondary-container":"","--gmp-mat-color-on-surface":"","--gmp-mat-color-surface":"","--gmp-mat-color-on-surface-variant":"","--gmp-mat-color-outline-decorative":"","--gmp-mat-color-positive":"","--gmp-mat-color-primary":"","--gmp-mat-color-secondary-container":"","--gmp-mat-color-disabled-surface":"","--gmp-mat-font-body-medium":"","--gmp-mat-font-body-small":"","--gmp-mat-font-family":"","--gmp-mat-font-headline-medium":"","--gmp-mat-font-label-large":"","--gmp-mat-font-title-small":"","--gmp-mat-color-on-neutral-container":"","--gmp-mat-color-on-positive-container":"","--gmp-mat-color-positive-container":"","--gmp-mat-font-display-small":"","background-color":"",border:"","border-radius":"","font-size":""},r,v,p,f,l,i;async function B(){await google.maps.importLibrary("places"),v=document.createElement("gmp-place-details-place-request"),p=document.createElement("gmp-place-all-content"),f=document.createElement("gmp-place-standard-content"),l=document.createElement("gmp-place-content-config"),L(),O(),T(),M()}function O(){S.addEventListener("gmp-select",({placePrediction:t})=>{t.toPlace().fetchFields({fields:["id"]}).then(n=>{g.value=n.place.id,e.placeId=g.value,c()})})}function T(){g.addEventListener("input",()=>{e.placeId=g.value,c()}),h.addEventListener("change",()=>{e.element=h.value,h.value=="gmp-place-details"?(m.disabled=!0,e.truncationPreferred=!1,u.disabled=!0,e.custom&&d.forEach(t=>{t.style.display="block"})):(m.disabled=!1,e.truncationPreferred=!1,u.disabled=!1,e.custom&&d.forEach(t=>{t.style.display="none"})),L()}),m.addEventListener("change",()=>{e.orientation=m.value,c()}),u.addEventListener("change",()=>{e.truncationPreferred=u.checked,c()}),q.forEach(t=>{t.addEventListener("change",n=>{switch(n.target.value){case"standard":E.style.display="none",e.all=!1,e.standard=!0,e.custom=!1;break;case"all":E.style.display="none",e.all=!0,e.standard=!1,e.custom=!1;break;case"custom":E.style.display="grid",e.all=!1,e.standard=!1,e.custom=!0,e.element=="gmp-place-details-compact"?d.forEach(s=>{s.style.display="none"}):e.element=="gmp-place-details"&&d.forEach(s=>{s.style.display="block"});break}c()})}),P.forEach(t=>{t.addEventListener("change",n=>{e.contents[n.target.value]=n.target.checked,c()})}),d.forEach(t=>{t.addEventListener("change",n=>{e.extraContents[n.target.value]=n.target.checked,c()})})}function M(){I.forEach(t=>{t.addEventListener("input",n=>{A[n.target.id]=n.target.value,r.style.setProperty(n.target.id,n.target.value)})}),$.forEach(t=>{t.addEventListener("click",n=>{n.preventDefault(),document.getElementById(n.target.dataset.style).value="#000000",r.style.removeProperty(n.target.dataset.style)})}),w.forEach(t=>{t.addEventListener("input",n=>{r.style.setProperty(n.target.id,n.target.value)})}),x.addEventListener("input",t=>{r.style.width=`${t.target.value}px`,document.getElementById("width-output").innerHTML=`${t.target.value}px`})}function L(){r=document.createElement(e.element),c()}function c(){v.place=e.placeId,r.orientation=e.orientation,r.truncationPreferred=e.truncationPreferred,b.innerHTML="",b.appendChild(r),r.innerHTML="",r.appendChild(v),r.contains(f)&&r.removeChild(f),r.contains(p)&&r.removeChild(p),r.contains(l)&&r.removeChild(l),l.innerHTML="";for(let t in e.contents)e.contents[t]?l.querySelector(`gmp-place-${t}`)||l.appendChild(document.createElement(`gmp-place-${t}`)):l.querySelector(`gmp-place-${t}`)&&l.removeChild(l.querySelector(`gmp-place-${t}`));i=l.cloneNode(!0);for(let t in e.extraContents)e.extraContents[t]?i.querySelector(`gmp-place-${t}`)||i.appendChild(document.createElement(`gmp-place-${t}`)):i.querySelector(`gmp-place-${t}`)&&i.removeChild(i.querySelector(`gmp-place-${t}`));e.all&&r.appendChild(p),e.standard&&r.appendChild(f),e.custom&&(e.element=="gmp-place-details-compact"&&r.appendChild(l),e.element=="gmp-place-details"&&r.appendChild(i))}B(); diff --git a/dist/samples/ui-kit-customization/dist/assets/index-CVJeVl62.css b/dist/samples/ui-kit-customization/dist/assets/index-CVJeVl62.css new file mode 100644 index 00000000..f7582cde --- /dev/null +++ b/dist/samples/ui-kit-customization/dist/assets/index-CVJeVl62.css @@ -0,0 +1,5 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */html,body{height:100%;margin:0}body{font:400 16px/24px Google Sans,sans-serif}h1{font-size:1rem}input[type=text],select{border:1px solid #ccc;padding:5px 3px;border-radius:5px;width:100%}input[type=text]{width:97%}label{display:block;color:#4a5568;font-size:.8rem;margin:8px 0 3px}p.note{color:#4a5568;font-size:.8rem;line-height:.8rem;margin:0}hr{border:1px solid #eee;border-radius:50%}a.reset,span{color:#4a5568;font-size:.7rem}#container{display:flex;gap:30px;align-items:flex-start}.controls{width:40%;max-height:1000px;overflow:scroll}section{margin:10px 0;padding:0 0 5px}gmp-place-autocomplete{display:inline-block;width:100%;height:32px}.content-element-container{padding-left:20px;display:none;grid-template-columns:auto auto}.content-element-container div{display:grid;grid-template-columns:auto auto}.content-element-container label{margin:0}.extra-content{display:none}.content-elements,.style-config section{display:grid;grid-template-columns:auto auto}.style-config label{display:block;font-size:.7rem;line-height:15px;margin-right:15px}.style-config .color-wrapper{display:inline-block;width:50px;height:27px;overflow:hidden;vertical-align:middle;margin-right:5px}.style-config input[type=color]{display:block;width:100%;height:100%;border:none}.style-config .reset{display:inline-block;vertical-align:middle}.style-config input[type=text]{display:block;width:80%;margin-top:4px}.style-config{row-gap:10px}.widget-container{margin:20px 0;width:auto}.contents{width:50%}gmp-place-details-compact,gmp-place-details{width:350px;margin:0 auto 10px}.accordion{background-color:#e8f0fe;color:#444;cursor:pointer;padding:18px;width:100%;text-align:left;border:none;border-bottom:1px solid #fff;outline:none;transition:.4s}.accordion:after{content:"+";color:#777;font-weight:700;float:right;margin-left:5px}.accordion.active:after{content:"-"}.accordion.active,.accordion:hover{background-color:#ccc}.style-config section.panel{padding:0 18px;background-color:#fff;display:none;overflow:hidden;transition:.2s ease-out} diff --git a/dist/samples/ui-kit-customization/dist/assets/index-DLFjn6mf.css b/dist/samples/ui-kit-customization/dist/assets/index-DLFjn6mf.css deleted file mode 100644 index 40c39de0..00000000 --- a/dist/samples/ui-kit-customization/dist/assets/index-DLFjn6mf.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */html,body{height:100%;margin:0}body{font:400 16px/24px Google Sans,sans-serif}h1{font-size:1rem}input[type=text],select{border:1px solid #ccc;padding:10px 8px;border-radius:5px;width:100%}input[type=text]{width:96%}label{display:block;color:#4a5568;font-size:.8rem;margin:8px 0 3px}p.note{color:#4a5568;font-size:.8rem;line-height:.8rem;margin:0}hr{border:1px solid #eee;border-radius:50%}a.reset,span{color:#4a5568;font-size:.8rem}#container{display:flex;gap:30px;align-items:flex-start}.controls{width:40%;padding:20px;max-height:1000px;overflow:scroll}section{margin:10px 0;padding:0 0 5px}gmp-place-autocomplete{display:inline-block;width:100%}.content-element-container{padding-left:20px;display:none;grid-template-columns:auto auto}.content-element-container div{display:grid;grid-template-columns:auto auto}.content-element-container label{margin:0}.extra-content{display:none}.content-elements,.style-config{display:grid;grid-template-columns:auto auto}.style-config label{display:block;line-height:15px;margin-right:15px}.style-config .color-wrapper{display:inline-block;width:50px;height:27px;overflow:hidden;vertical-align:middle;margin-right:5px}.style-config input[type=color]{display:block;width:100%;height:100%;border:none}.style-config .reset{display:inline-block;vertical-align:middle}.style-config input[type=text]{display:block;width:80%;margin-top:4px}.style-config{row-gap:10px}.widget-container{margin:20px 0;width:auto}.contents{width:50%}gmp-place-details-compact,gmp-place-details{width:350px;margin:0 auto 10px}.vAygCK-api-load-alpha-banner{display:none} diff --git a/dist/samples/ui-kit-customization/dist/assets/index-hSgfg4_y.js b/dist/samples/ui-kit-customization/dist/assets/index-hSgfg4_y.js new file mode 100644 index 00000000..53d6039a --- /dev/null +++ b/dist/samples/ui-kit-customization/dist/assets/index-hSgfg4_y.js @@ -0,0 +1,5 @@ +(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))C(a);new MutationObserver(a=>{for(const o of a)if(o.type==="childList")for(const y of o.addedNodes)y.tagName==="LINK"&&y.rel==="modulepreload"&&C(y)}).observe(document,{childList:!0,subtree:!0});function c(a){const o={};return a.integrity&&(o.integrity=a.integrity),a.referrerPolicy&&(o.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?o.credentials="include":a.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function C(a){if(a.ep)return;a.ep=!0;const o=c(a);fetch(a.href,o)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const S=document.querySelector("gmp-place-autocomplete"),h=document.getElementById("component"),m=document.getElementById("orientation"),b=document.querySelector(".widget-container"),q=document.querySelectorAll(".content-config"),E=document.querySelector(".content-element-container"),P=document.querySelectorAll(".content-element"),d=document.querySelectorAll(".extra-content"),I=document.querySelectorAll("input[type='color']"),w=document.querySelectorAll(".style-config input[type='text']"),g=document.getElementById("place-id"),x=document.getElementById("width-slider"),u=document.getElementById("truncationpreferred"),A=document.querySelectorAll(".reset");let t={placeId:"ChIJ3S-JXmauEmsRUcIaWtf4MzE",element:"gmp-place-details-compact",orientation:"VERTICAL",all:!0,standard:!1,custom:!1,truncationPreferred:!1,contents:{media:!0,address:!0,rating:!0,type:!0,price:!0,"accessible-entrance-icon":!0,"open-now-status":!0,attribution:!0},extraContents:{website:!0,"phone-number":!0,"opening-hours":!0,summary:!0,"type-specific-highlights":!0,reviews:!0,"plus-code":!0,"feature-list":!0}},$={"--gmp-mat-color-info":"","--gmp-mat-color-negative":"","--gmp-mat-color-neutral-container":"","--gmp-mat-color-on-secondary-container":"","--gmp-mat-color-on-surface":"","--gmp-mat-color-surface":"","--gmp-mat-color-on-surface-variant":"","--gmp-mat-color-outline-decorative":"","--gmp-mat-color-positive":"","--gmp-mat-color-primary":"","--gmp-mat-color-secondary-container":"","--gmp-mat-color-disabled-surface":"","--gmp-mat-font-body-medium":"","--gmp-mat-font-body-small":"","--gmp-mat-font-family":"","--gmp-mat-font-headline-medium":"","--gmp-mat-font-label-large":"","--gmp-mat-font-title-small":"","--gmp-mat-color-on-neutral-container":"","--gmp-mat-color-on-positive-container":"","--gmp-mat-color-positive-container":"","--gmp-mat-font-display-small":"","background-color":"",border:"","border-radius":"","font-size":""},r,v,p,f,l,s;async function B(){await google.maps.importLibrary("places"),v=document.createElement("gmp-place-details-place-request"),p=document.createElement("gmp-place-all-content"),f=document.createElement("gmp-place-standard-content"),l=document.createElement("gmp-place-content-config"),O(),L(),T(),k(),M()}function O(){let e=document.getElementsByClassName("accordion");Array.from(e).forEach(n=>{n.addEventListener("click",()=>{n.classList.toggle("active");let c=n.nextElementSibling;c&&(c.style.display==="grid"?c.style.display="none":c.style.display="grid")})})}function T(){S.addEventListener("gmp-select",({placePrediction:e})=>{e.toPlace().fetchFields({fields:["id"]}).then(n=>{g.value=n.place.id,t.placeId=g.value,i()})})}function k(){g.addEventListener("input",()=>{t.placeId=g.value,i()}),h.addEventListener("change",()=>{t.element=h.value,h.value=="gmp-place-details"?(m.disabled=!0,t.truncationPreferred=!1,u.disabled=!0,t.custom&&d.forEach(e=>{e.style.display="block"})):(m.disabled=!1,t.truncationPreferred=!1,u.disabled=!1,t.custom&&d.forEach(e=>{e.style.display="none"})),L()}),m.addEventListener("change",()=>{t.orientation=m.value,i()}),u.addEventListener("change",()=>{t.truncationPreferred=u.checked,i()}),q.forEach(e=>{e.addEventListener("change",n=>{switch(n.target.value){case"standard":E.style.display="none",t.all=!1,t.standard=!0,t.custom=!1;break;case"all":E.style.display="none",t.all=!0,t.standard=!1,t.custom=!1;break;case"custom":E.style.display="grid",t.all=!1,t.standard=!1,t.custom=!0,t.element=="gmp-place-details-compact"?d.forEach(c=>{c.style.display="none"}):t.element=="gmp-place-details"&&d.forEach(c=>{c.style.display="block"});break}i()})}),P.forEach(e=>{e.addEventListener("change",n=>{t.contents[n.target.value]=n.target.checked,i()})}),d.forEach(e=>{e.addEventListener("change",n=>{t.extraContents[n.target.value]=n.target.checked,i()})})}function M(){I.forEach(e=>{e.addEventListener("input",n=>{$[n.target.id]=n.target.value,r.style.setProperty(n.target.id,n.target.value)})}),A.forEach(e=>{e.addEventListener("click",n=>{n.preventDefault(),document.getElementById(n.target.dataset.style).value="#000000",r.style.removeProperty(n.target.dataset.style)})}),w.forEach(e=>{e.addEventListener("input",n=>{r.style.setProperty(n.target.id,n.target.value)})}),x.addEventListener("input",e=>{r.style.width=`${e.target.value}px`,document.getElementById("width-output").innerHTML=`${e.target.value}px`})}function L(){r=document.createElement(t.element),i()}function i(){v.place=t.placeId,r.orientation=t.orientation,r.truncationPreferred=t.truncationPreferred,b.innerHTML="",b.appendChild(r),r.innerHTML="",r.appendChild(v),r.contains(f)&&r.removeChild(f),r.contains(p)&&r.removeChild(p),r.contains(l)&&r.removeChild(l),l.innerHTML="";for(let e in t.contents)t.contents[e]?l.querySelector(`gmp-place-${e}`)||l.appendChild(document.createElement(`gmp-place-${e}`)):l.querySelector(`gmp-place-${e}`)&&l.removeChild(l.querySelector(`gmp-place-${e}`));s=l.cloneNode(!0);for(let e in t.extraContents)t.extraContents[e]?s.querySelector(`gmp-place-${e}`)||s.appendChild(document.createElement(`gmp-place-${e}`)):s.querySelector(`gmp-place-${e}`)&&s.removeChild(s.querySelector(`gmp-place-${e}`));t.all&&r.appendChild(p),t.standard&&r.appendChild(f),t.custom&&(t.element=="gmp-place-details-compact"&&r.appendChild(l),t.element=="gmp-place-details"&&r.appendChild(s))}B(); diff --git a/dist/samples/ui-kit-customization/dist/index.html b/dist/samples/ui-kit-customization/dist/index.html index e45a6646..e288cab4 100644 --- a/dist/samples/ui-kit-customization/dist/index.html +++ b/dist/samples/ui-kit-customization/dist/index.html @@ -8,13 +8,12 @@ - - + +
-

Component settings

@@ -90,149 +89,143 @@

Component settings

CSS Style Properties

-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ + +
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
diff --git a/dist/samples/ui-kit-customization/docs/index.html b/dist/samples/ui-kit-customization/docs/index.html index 72b10958..f991f28b 100644 --- a/dist/samples/ui-kit-customization/docs/index.html +++ b/dist/samples/ui-kit-customization/docs/index.html @@ -14,7 +14,6 @@
-

Component settings

@@ -90,149 +89,143 @@

Component settings

CSS Style Properties

-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ + +
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
diff --git a/dist/samples/ui-kit-customization/docs/index.js b/dist/samples/ui-kit-customization/docs/index.js index 5d6e7c72..cd76326c 100644 --- a/dist/samples/ui-kit-customization/docs/index.js +++ b/dist/samples/ui-kit-customization/docs/index.js @@ -84,11 +84,30 @@ async function init() { gmpPlaceAll = document.createElement('gmp-place-all-content'); gmpPlaceStandard = document.createElement('gmp-place-standard-content'); gmpContentConfig = document.createElement('gmp-place-content-config'); + initAccordion(); detailsConstructor(); //Construct the place details element initSearchPlace(); //Initialize Autocomplete search widgetSelector(); //Handlers for controls styleCustomization(); //css properties } +/* style properties accordion */ +function initAccordion() { + let accordions = document.getElementsByClassName('accordion'); + Array.from(accordions).forEach((item) => { + item.addEventListener('click', () => { + item.classList.toggle('active'); + let panel = item.nextElementSibling; + if (panel) { + if (panel.style.display === 'grid') { + panel.style.display = 'none'; + } + else { + panel.style.display = 'grid'; + } + } + }); + }); +} /* Initialize Autocomplete for searching places */ function initSearchPlace() { searchPlace.addEventListener('gmp-select', ({ placePrediction }) => { diff --git a/dist/samples/ui-kit-customization/docs/index.ts b/dist/samples/ui-kit-customization/docs/index.ts index e838dde1..47bbc3f6 100644 --- a/dist/samples/ui-kit-customization/docs/index.ts +++ b/dist/samples/ui-kit-customization/docs/index.ts @@ -95,13 +95,32 @@ async function init() { gmpPlaceStandard = document.createElement('gmp-place-standard-content'); gmpContentConfig = document.createElement('gmp-place-content-config'); - + initAccordion(); detailsConstructor(); //Construct the place details element initSearchPlace(); //Initialize Autocomplete search widgetSelector(); //Handlers for controls styleCustomization(); //css properties } +/* style properties accordion */ +function initAccordion(){ + let accordions = document.getElementsByClassName('accordion'); + Array.from(accordions).forEach((item) => { + item.addEventListener('click', () => { + item.classList.toggle('active'); + let panel = item.nextElementSibling as HTMLElement | null; + if(panel){ + if (panel.style.display === 'grid') { + panel.style.display = 'none'; + } else { + panel.style.display = 'grid'; + } + } + }); + + }); +} + /* Initialize Autocomplete for searching places */ function initSearchPlace() { searchPlace.addEventListener('gmp-select', ({ diff --git a/dist/samples/ui-kit-customization/docs/style.css b/dist/samples/ui-kit-customization/docs/style.css index 03d945c3..360467c0 100644 --- a/dist/samples/ui-kit-customization/docs/style.css +++ b/dist/samples/ui-kit-customization/docs/style.css @@ -24,13 +24,13 @@ h1 { input[type="text"], select { border: 1px solid #ccc; - padding: 10px 8px; + padding: 5px 3px; border-radius: 5px; width: 100%; } input[type="text"] { - width: 96%; + width: 97%; } label { @@ -55,7 +55,7 @@ hr { a.reset, span { color: #4a5568; - font-size: 0.8rem; + font-size: 0.7rem; } #container { @@ -66,7 +66,6 @@ span { .controls { width: 40%; - padding: 20px; max-height: 1000px; overflow: scroll; } @@ -79,6 +78,7 @@ section { gmp-place-autocomplete { display: inline-block; width: 100%; + height: 32px; } .content-element-container { @@ -101,13 +101,14 @@ gmp-place-autocomplete { } .content-elements, -.style-config { +.style-config section { display: grid; grid-template-columns: auto auto; } .style-config label { display: block; + font-size: 0.7rem; line-height: 15px; margin-right: 15px; } @@ -158,7 +159,40 @@ gmp-place-details { margin: 0 auto 10px auto; } -.vAygCK-api-load-alpha-banner { +.accordion { + background-color: #e8f0fe; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + text-align: left; + border: none; + border-bottom: 1px solid #fff; + outline: none; + transition: 0.4s; +} + +.accordion:after { + content: '\002B'; + color: #777; + font-weight: bold; + float: right; + margin-left: 5px; +} + +.accordion.active:after { + content: '\002D'; +} + +.accordion.active, .accordion:hover { + background-color: #ccc; +} + +.style-config section.panel { + padding: 0 18px; + background-color: white; display: none; + overflow: hidden; + transition: 0.2s ease-out; } /* [END maps_ui_kit_customization] */ diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.css b/dist/samples/ui-kit-customization/jsfiddle/demo.css index 84001eda..49e1f071 100644 --- a/dist/samples/ui-kit-customization/jsfiddle/demo.css +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.css @@ -24,13 +24,13 @@ h1 { input[type="text"], select { border: 1px solid #ccc; - padding: 10px 8px; + padding: 5px 3px; border-radius: 5px; width: 100%; } input[type="text"] { - width: 96%; + width: 97%; } label { @@ -55,7 +55,7 @@ hr { a.reset, span { color: #4a5568; - font-size: 0.8rem; + font-size: 0.7rem; } #container { @@ -66,7 +66,6 @@ span { .controls { width: 40%; - padding: 20px; max-height: 1000px; overflow: scroll; } @@ -79,6 +78,7 @@ section { gmp-place-autocomplete { display: inline-block; width: 100%; + height: 32px; } .content-element-container { @@ -101,13 +101,14 @@ gmp-place-autocomplete { } .content-elements, -.style-config { +.style-config section { display: grid; grid-template-columns: auto auto; } .style-config label { display: block; + font-size: 0.7rem; line-height: 15px; margin-right: 15px; } @@ -158,7 +159,40 @@ gmp-place-details { margin: 0 auto 10px auto; } -.vAygCK-api-load-alpha-banner { +.accordion { + background-color: #e8f0fe; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + text-align: left; + border: none; + border-bottom: 1px solid #fff; + outline: none; + transition: 0.4s; +} + +.accordion:after { + content: '\002B'; + color: #777; + font-weight: bold; + float: right; + margin-left: 5px; +} + +.accordion.active:after { + content: '\002D'; +} + +.accordion.active, .accordion:hover { + background-color: #ccc; +} + +.style-config section.panel { + padding: 0 18px; + background-color: white; display: none; + overflow: hidden; + transition: 0.2s ease-out; } diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.html b/dist/samples/ui-kit-customization/jsfiddle/demo.html index d5a42b42..7c233580 100644 --- a/dist/samples/ui-kit-customization/jsfiddle/demo.html +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.html @@ -14,7 +14,6 @@
-

Component settings

@@ -90,149 +89,143 @@

Component settings

CSS Style Properties

-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
Reset -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ + +
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+
+ +
+ Reset +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
diff --git a/dist/samples/ui-kit-customization/jsfiddle/demo.js b/dist/samples/ui-kit-customization/jsfiddle/demo.js index 5d6e7c72..cd76326c 100644 --- a/dist/samples/ui-kit-customization/jsfiddle/demo.js +++ b/dist/samples/ui-kit-customization/jsfiddle/demo.js @@ -84,11 +84,30 @@ async function init() { gmpPlaceAll = document.createElement('gmp-place-all-content'); gmpPlaceStandard = document.createElement('gmp-place-standard-content'); gmpContentConfig = document.createElement('gmp-place-content-config'); + initAccordion(); detailsConstructor(); //Construct the place details element initSearchPlace(); //Initialize Autocomplete search widgetSelector(); //Handlers for controls styleCustomization(); //css properties } +/* style properties accordion */ +function initAccordion() { + let accordions = document.getElementsByClassName('accordion'); + Array.from(accordions).forEach((item) => { + item.addEventListener('click', () => { + item.classList.toggle('active'); + let panel = item.nextElementSibling; + if (panel) { + if (panel.style.display === 'grid') { + panel.style.display = 'none'; + } + else { + panel.style.display = 'grid'; + } + } + }); + }); +} /* Initialize Autocomplete for searching places */ function initSearchPlace() { searchPlace.addEventListener('gmp-select', ({ placePrediction }) => {