Skip to content

chore: automated output update (dist) #596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willum070 merged 1 commit into from
Jul 7, 2025
Merged

chore: automated output update (dist) #596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 241 additions & 0 deletions dist/samples/ui-kit-customization/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
<!--
@license
Copyright 2025 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<!--[START maps_ui_kit_customization] -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="container">
<div class="controls">
<section><label for="place">Search a
place</label><gmp-place-autocomplete></gmp-place-autocomplete>
</section>
<section><label for="place">Place ID</label><input type="text"
id="place-id" value="ChIJ3S-JXmauEmsRUcIaWtf4MzE" /></section>
<section><label for="component">Component</label><select
name="component" id="component">
<option selected value="gmp-place-details-compact">Place details
compact</option>
<option value="gmp-place-details">Place details full</option>
</select></section>
<section><label for="orientation">Orientation</label><select
name="orientation" id="orientation">
<option selected value="VERTICAL">Vertical</option>
<option value="HORIZONTAL">Horizontal</option>
</select></section>
<section><label for="truncationpreferred"><input type="checkbox"
class="" name="truncationpreferred" id="truncationpreferred"
value="truncation-preferred" />Truncation Preferred </label>
<p class="note">Select to truncate the place name and address to fit
on one line</p>
</section>
<section><label for="width">Width (150px - 450px)</label><input
type="range" id="width-slider" name="width" min="150" max="450"
step="10" value="350" /><span id="width-output">350px</span>
</section>
<hr />
<section>
<p class="heading">Content configuration</p>
<div><label><input type="radio" class="content-config" name="content"
id="content-standard" value="standard" />Standard content
</label><label><input checked type="radio" class="content-config"
name="content" id="content-all" value="all" />All contents
</label><label><input type="radio" class="content-config"
name="content" id="content-custom" value="custom" />Custom
content </label></div>
<div class="content-element-container"><label><input type="checkbox"
class="content-element" value="media" checked />Media
</label><label><input type="checkbox" class="content-element"
value="address" checked />Address </label><label><input
type="checkbox" class="content-element" value="rating"
checked />Rating </label><label><input type="checkbox"
class="content-element" value="type" checked />Type
</label><label><input type="checkbox" class="content-element"
value="price" checked />Price </label><label><input
type="checkbox" class="content-element"
value="accessible-entrance-icon" checked />Accessible Entrance
Icon </label><label><input type="checkbox" class="content-element"
value="open-now-status" checked />Open Now Status </label>
<label class="extra-content"><input
type="checkbox" class="content-element" value="opening-hours"
checked />Opening Hours </label><label
class="extra-content"><input type="checkbox"
class="content-element" value="website" checked />Website
</label><label class="extra-content"><input type="checkbox"
class="content-element" value="phone-number" checked />Phone
Number </label><label class="extra-content"><input
type="checkbox" class="content-element" value="summary"
checked />Summary </label><label class="extra-content"><input
type="checkbox" class="content-element"
value="type-specific-highlights" checked />Type Specific
Highlights </label><label class="extra-content"><input
type="checkbox" class="content-element" value="reviews"
checked />Reviews </label><label class="extra-content"><input
type="checkbox" class="content-element" value="plus-code"
checked />Plus Code </label><label
class="extra-content"><input type="checkbox"
class="content-element" value="feature-list" checked />Feature
List </label>
</div>
</section>
<hr />
<section>
<p class="heading">CSS Style Properties</p>
<div class="style-config">
<button class="accordion">Color</button>
<section class="panel" id="style-color">
<div>
<label>--gmp-mat-color-on-surface<br />(Regular text color)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-on-surface"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-on-surface">Reset</a>
</div>
<div>
<label>--gmp-mat-color-on-surface-variant<br />(Less emphasized text)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-on-surface-variant"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-on-surface-variant">Reset</a>
</div>
<div>
<label>--gmp-mat-color-primary<br />(Review count and links)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-primary"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-primary">Reset</a>
</div>
<div>
<label>--gmp-mat-color-info<br />(Accessible entrance icon)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-info"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-info">Reset</a>
</div>
<div>
<label>--gmp-mat-color-neutral-container<br />(Container color for image placeholder)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-neutral-container"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-neutral-container">Reset</a>
</div>
<div>
<label>--gmp-mat-color-outline-decorative<br />(The element's border)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-outline-decorative"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-outline-decorative">Reset</a>
</div>
<div>
<label>--gmp-mat-color-positive<br />('Open' text in open now status)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-positive"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-positive">Reset</a>
</div>
<div>
<label>--gmp-mat-color-negative<br />('Closed' text in open now)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-negative"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-negative">Reset</a>
</div>
<div>
<label>--gmp-mat-color-on-secondary-container<br />(Text/icons on Open In Map button)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-on-secondary-container"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-on-secondary-container">Reset</a>
</div>
<div>
<label>--gmp-mat-color-secondary-container<br />(Background of the Open in Maps button)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-secondary-container"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-secondary-container">Reset</a>
</div>
<div>
<label>--gmp-mat-color-surface<br />(Backgrounds of the element and attribution dialog)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-surface"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-surface">Reset</a>
</div>
<div>
<label>background-color<br />(Overrides the background color of the element)</label>
<div class="color-wrapper"><input type="color" id="background-color"></div>
<a href="#" class="reset" data-style="background-color">Reset</a>
</div>

<!-- full view only -->
<div>
<label>--gmp-mat-color-disabled-surface<br />(Full: Empty review stars)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-disabled-surface"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-disabled-surface">Reset</a>
</div>
<div>
<label>--gmp-mat-color-on-neutral-container<br />(Full: Date badge or EV charger availability badge when unavailable)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-on-neutral-container"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-on-neutral-container">Reset</a>
</div>
<div>
<label>--gmp-mat-color-on-positive-container<br />(Full: EV charger availability badge when available)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-on-positive-container"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-on-positive-container">Reset</a>
</div>
<div>
<label>--gmp-mat-color-positive-container<br />(Full: Container color for EV charger availability badge when available)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-color-positive-container"></div>
<a href="#" class="reset" data-style="--gmp-mat-color-positive-container">Reset</a>
</div>
<div>
<label>--gmp-mat-font-display-small<br />(Full: Place name and text in About tab)</label>
<div class="color-wrapper"><input type="color" id="--gmp-mat-font-display-small"></div>
<a href="#" class="reset" data-style="--gmp-mat-font-display-small">Reset</a>
</div>
<!---->
</section>
<button class="accordion">Typography</button>
<section class="panel" id="style-typography">
<div>
<label>--gmp-mat-font-body-medium<br />(Body text in attribution dialog)</label>
<input type="text" id="--gmp-mat-font-body-medium" value="">
</div>
<div>
<label>--gmp-mat-font-body-small<br />(Address, rating, type, pricin,open now status)</label>
<input type="text" id="--gmp-mat-font-body-small" value="">
</div>
<div>
<label>--gmp-mat-font-family<br />(Base font family)</label>
<input type="text" id="--gmp-mat-font-family" value="">
</div>
<div>
<label>--gmp-mat-font-headline-medium<br />(Heading text in attribution dialog)</label>
<input type="text" id="--gmp-mat-font-headline-medium" value="">
</div>
<div>
<label>--gmp-mat-font-label-large<br />(Open in Maps button and links)</label>
<input type="text" id="--gmp-mat-font-label-large" value="">
</div>
<div>
<label>--gmp-mat-font-title-small<br />(Place name)</label>
<input type="text" id="--gmp-mat-font-title-small" value="">
</div>
<div>
<label>color-scheme<br />(Color scheme this element can be rendered in)</label>
<input type="text" id="color-scheme">
</div>
<div>
<label>font-size<br />(Scales all text and icons in the element)</label>
<input type="text" id="font-size" value="">
</div>
</section>
<button class="accordion">Container</button>
<section class="panel" id="style-container">
<div>
<label>border<br />(Overrides the border of the element)</label>
<input type="text" id="border">
</div>
<div>
<label>border-radius<br />(Overrides the border radius of the element)</label>
<input type="text" id="border-radius">
</div>
</section>
</div>
</section>
</div>
<div class="contents">
<div class="widget-container"> </div>
</div>
</div>

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>
<!--[END maps_ui_kit_customization] -->
Loading