commit 2232d1bbd8f9b42a36fcf4ea7d57c081faecf0e0 Author: PranshulGG Date: Sun Jun 16 18:49:27 2024 +0530 Release diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..aa724b770 --- /dev/null +++ b/.gitignore @@ -0,0 +1,15 @@ +*.iml +.gradle +/local.properties +/.idea/caches +/.idea/libraries +/.idea/modules.xml +/.idea/workspace.xml +/.idea/navEditor.xml +/.idea/assetWizardSettings.xml +.DS_Store +/build +/captures +.externalNativeBuild +.cxx +local.properties diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..26d33521a --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/compiler.xml b/.idea/compiler.xml new file mode 100644 index 000000000..b589d56e9 --- /dev/null +++ b/.idea/compiler.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml new file mode 100644 index 000000000..0cdd93eea --- /dev/null +++ b/.idea/deploymentTargetDropDown.xml @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/gradle.xml b/.idea/gradle.xml new file mode 100644 index 000000000..ae388c2a5 --- /dev/null +++ b/.idea/gradle.xml @@ -0,0 +1,20 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 000000000..8978d23db --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..94a25f7f4 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/.gitignore b/app/.gitignore new file mode 100644 index 000000000..42afabfd2 --- /dev/null +++ b/app/.gitignore @@ -0,0 +1 @@ +/build \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle new file mode 100644 index 000000000..7d83539c3 --- /dev/null +++ b/app/build.gradle @@ -0,0 +1,40 @@ +plugins { + id 'com.android.application' +} + +android { + namespace 'com.example.weathermaster' + compileSdk 34 + + defaultConfig { + applicationId "com.example.weathermaster" + minSdk 22 + targetSdk 33 + versionCode 1 + versionName "1.1.0 (W)" + + testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" + } + + buildTypes { + release { + minifyEnabled false + proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' + } + } + compileOptions { + sourceCompatibility JavaVersion.VERSION_1_8 + targetCompatibility JavaVersion.VERSION_1_8 + } +} + +dependencies { + + implementation 'androidx.appcompat:appcompat:1.7.0' + implementation 'com.google.android.material:material:1.12.0' + implementation 'androidx.constraintlayout:constraintlayout:2.1.4' + implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0' + testImplementation 'junit:junit:4.13.2' + androidTestImplementation 'androidx.test.ext:junit:1.1.5' + androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1' +} \ No newline at end of file diff --git a/app/proguard-rules.pro b/app/proguard-rules.pro new file mode 100644 index 000000000..481bb4348 --- /dev/null +++ b/app/proguard-rules.pro @@ -0,0 +1,21 @@ +# Add project specific ProGuard rules here. +# You can control the set of applied configuration files using the +# proguardFiles setting in build.gradle. +# +# For more details, see +# http://developer.android.com/guide/developing/tools/proguard.html + +# If your project uses WebView with JS, uncomment the following +# and specify the fully qualified class name to the JavaScript interface +# class: +#-keepclassmembers class fqcn.of.javascript.interface.for.webview { +# public *; +#} + +# Uncomment this to preserve the line number information for +# debugging stack traces. +#-keepattributes SourceFile,LineNumberTable + +# If you keep the line number information, uncomment this to +# hide the original source file name. +#-renamesourcefileattribute SourceFile \ No newline at end of file diff --git a/app/src/androidTest/java/com/example/weathermaster/ExampleInstrumentedTest.java b/app/src/androidTest/java/com/example/weathermaster/ExampleInstrumentedTest.java new file mode 100644 index 000000000..a82186ee9 --- /dev/null +++ b/app/src/androidTest/java/com/example/weathermaster/ExampleInstrumentedTest.java @@ -0,0 +1,26 @@ +package com.example.weathermaster; + +import android.content.Context; + +import androidx.test.platform.app.InstrumentationRegistry; +import androidx.test.ext.junit.runners.AndroidJUnit4; + +import org.junit.Test; +import org.junit.runner.RunWith; + +import static org.junit.Assert.*; + +/** + * Instrumented test, which will execute on an Android device. + * + * @see Testing documentation + */ +@RunWith(AndroidJUnit4.class) +public class ExampleInstrumentedTest { + @Test + public void useAppContext() { + // Context of the app under test. + Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext(); + assertEquals("com.example.weathermaster", appContext.getPackageName()); + } +} \ No newline at end of file diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml new file mode 100644 index 000000000..174cd7146 --- /dev/null +++ b/app/src/main/AndroidManifest.xml @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/air-pop-imgs/fair.png b/app/src/main/assets/air-pop-imgs/fair.png new file mode 100644 index 000000000..bb2b142cb Binary files /dev/null and b/app/src/main/assets/air-pop-imgs/fair.png differ diff --git a/app/src/main/assets/air-pop-imgs/good.png b/app/src/main/assets/air-pop-imgs/good.png new file mode 100644 index 000000000..f02a9062e Binary files /dev/null and b/app/src/main/assets/air-pop-imgs/good.png differ diff --git a/app/src/main/assets/air-pop-imgs/moderate.png b/app/src/main/assets/air-pop-imgs/moderate.png new file mode 100644 index 000000000..c3d3f9db3 Binary files /dev/null and b/app/src/main/assets/air-pop-imgs/moderate.png differ diff --git a/app/src/main/assets/air-pop-imgs/poor.png b/app/src/main/assets/air-pop-imgs/poor.png new file mode 100644 index 000000000..c02976fcb Binary files /dev/null and b/app/src/main/assets/air-pop-imgs/poor.png differ diff --git a/app/src/main/assets/air-pop-imgs/very_poor.png b/app/src/main/assets/air-pop-imgs/very_poor.png new file mode 100644 index 000000000..6cdf10c06 Binary files /dev/null and b/app/src/main/assets/air-pop-imgs/very_poor.png differ diff --git a/app/src/main/assets/app/app.js b/app/src/main/assets/app/app.js new file mode 100644 index 000000000..8a1018278 --- /dev/null +++ b/app/src/main/assets/app/app.js @@ -0,0 +1,856 @@ +const SelectedTempUnit = localStorage.getItem('SelectedTempUnit'); +const SelectedWindUnit = localStorage.getItem('SelectedWindUnit'); +const SelectedVisibiltyUnit = localStorage.getItem('selectedVisibilityUnit'); + + + +let currentLocation = null; + +document.addEventListener('DOMContentLoaded', () => { + showLoader(); + if ("geolocation" in navigator) { + navigator.geolocation.getCurrentPosition((position) => { + currentLocation = { + latitude: position.coords.latitude, + longitude: position.coords.longitude + }; + getWeatherByCoordinates(currentLocation.latitude, currentLocation.longitude); + }, (error) => { + console.error('Geolocation error:', error); + + }); + } else { + console.error('Geolocation is not available in this browser.'); + + } +}); + + +const uvIndexData = [ + { description: "Very Low", style: "background-color: #4AC708;", img: 'uv-images/uv-0.png', detail: 'A UV index of 0 is considered satisfactory, indicating that there is little or no risk of harm from ultraviolet radiation.' }, + { description: "Low", style: "background-color: #4AC708;", img: 'uv-images/uv-1.png', detail: 'A UV index of 1 is considered satisfactory, indicating that there is little or no risk of harm from ultraviolet radiation.' }, + { description: "Acceptable", style: "background-color: #4AC708;", img: 'uv-images/uv-2.png', detail: 'With a UV index of 2, conditions are still generally low-risk, indicating that exposure to ultraviolet radiation poses a minimal threat.' }, + { description: "Fair", style: "background-color: #FFB800;", img: 'uv-images/uv-3.png', detail: 'At a index of 3, the risk of harm from ultraviolet radiation remains low. It is considered moderate, suggesting a slight increase in caution for prolonged sun exposure.' }, + { description: "Moderate", style: "background-color: #FFB800;", img: 'uv-images/uv-4.png', detail: 'index at 4 Moderate risk. Caution advised—consider sunscreen and limit sun exposure during peak hours.' }, + { description: "Balanced", style: "background-color: #FFB800;", img: 'uv-images/uv-5.png', detail: 'index of 5 Moderate risk. Use sunscreen, especially during midday hours, and take precautions for extended sun exposure.' }, + { description: "Elevated", style: "background-color: #ff8d00;", img: 'uv-images/uv-6.png', detail: 'index at 6 Moderate to high risk. Apply sunscreen, wear protective clothing, and limit sun exposure, especially during midday hours.' }, + { description: "Intense", style: "background-color: #ff8d00;", img: 'uv-images/uv-7.png', detail: 'index at 7 High risk. Use sunscreen, protective clothing, and limit sun exposure, particularly during midday hours, to reduce the risk of harm from intense ultraviolet radiation.' }, + { description: "Severe", style: "background-color: #ff3c00;", img: 'uv-images/uv-8.png', detail: 'index of 8 Very high risk. Take utmost precautions—apply sunscreen, wear protective clothing, and minimize sun exposure, especially during midday hours, to prevent harm from intense ultraviolet radiation.' }, + { description: "Critical", style: "background-color: #ff3c00;", img: 'uv-images/uv-9.png', detail: 'index at 9 Extremely high risk. Use high SPF sunscreen, wear protective clothing, and avoid prolonged sun exposure, especially midday, to minimize harm from intense ultraviolet radiation.' }, + { description: "Its Very High", style: "background-color: #ff3c00;", img: 'uv-images/uv-10.png', detail: 'index at 10 Very high risk. Maximize precautions—use high SPF sunscreen, wear protective clothing, and limit sun exposure, especially midday, to minimize harm from intense ultraviolet radiation.' }, + { description: "Extreme", style: "background-color: #9936D4;", img: 'uv-images/uv-11.png', detail: 'Index at 11 avoid every outdoor activies.' }, + { description: "Extreme+", style: "background-color: #FF0087;", img: 'uv-images/uv-12.png', detail: 'Index at 12 avoid every outdoor activies.' }, + { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' } + +]; + + +function handleGeolocationError(error) { + console.error('Error getting geolocation:', error); + displayErrorMessage('Error getting geolocation. Please enable location services.'); +} + + +document.addEventListener('DOMContentLoaded', () => { + const cityInput = document.getElementById('city-input'); + const cityList = document.getElementById('city-list'); + const cityopen = document.getElementById('city-open'); + const searchContainer = document.getElementById('search-container'); + const closeButton = document.querySelector('.close_search'); + + + cityopen.addEventListener("click", () => { + searchContainer.style.display = 'block'; + cityInput.focus() + window.history.pushState({ SearchContainerOpen: true }, ""); + + + }); + + closeButton.addEventListener('click', () => { + + window.history.back() + }); + + + + + cityInput.addEventListener('input', () => { + const searchTerm = cityInput.value.trim(); + + + if (searchTerm) { + document.getElementById('cityLoader').hidden = false; + fetchCitySuggestions(searchTerm) + .then(suggestions => displayCitySuggestions(suggestions, searchTerm)); + } else { + cityList.innerHTML = ''; + document.getElementById('cityLoader').hidden = true; + + + } + }); + + cityList.addEventListener('click', (event) => { + const selectedCity = event.target.textContent; + const apiKey = '120d979ba5b2d0780f51872890f5ad0b'; + + + + window.history.back() + + + + + cityList.innerHTML = ''; + cityInput.value = ''; + document.getElementById('city-name').innerHTML = '' + document.querySelector('.focus-input').blur(); + document.getElementById('forecast').scrollLeft = 0; + showLoader() + if (selectedCity.toLowerCase() === "delhi, india") { + getWeather(selectedCity, 28.6139, 77.2090); + } else { + fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${encodeURIComponent(selectedCity)}&limit=1&appid=${apiKey}`) + .then(response => response.json()) + .then(data => { + if (data.length > 0) { + const cityCoords = data[0]; + getWeather(selectedCity, cityCoords.lat, cityCoords.lon); + } + }) + .catch(error => console.error('Error fetching coordinates:', error)); + } + + }); +}); + + +window.addEventListener('popstate', function (event) { + document.getElementById('search-container').style.opacity = '0' + + setTimeout(() => { + document.getElementById('search-container').style.display = 'none' + document.getElementById('search-container').style.opacity = '1' + + }, 200); + +}); + + +function fetchCitySuggestions(searchTerm) { + const query = encodeURIComponent(searchTerm); + const apiKey = '120d979ba5b2d0780f51872890f5ad0b'; + + if (searchTerm.toLowerCase() === "delhi") { + return Promise.resolve(["Delhi, India"]); + } + + return fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${query}&limit=5&appid=${apiKey}`) + .then(response => response.json()) + .then(data => data.map(city => { + const cityName = city.name; + const stateOrCountry = city.state || city.country; + + return `${cityName}, ${stateOrCountry}`; + + })) + .catch(error => console.error('Error fetching city suggestions:', error)); +} + +function displayCitySuggestions(suggestions, searchTerm) { + const cityList = document.getElementById('city-list'); + cityList.innerHTML = ''; + suggestions.forEach(suggestion => { + + if (suggestion.toLowerCase().includes(searchTerm.toLowerCase())) { + const suggestionItem = document.createElement('div'); + const createSuggestRipple = document.createElement('md-ripple') + createSuggestRipple.style = '--md-ripple-pressed-opacity: 0.13;' + suggestionItem.classList.add("suggest"); + suggestionItem.textContent = suggestion; + cityList.appendChild(suggestionItem); + + suggestionItem.appendChild(createSuggestRipple) + setTimeout(() => { + document.getElementById('cityLoader').hidden = true; + + }, 400); + + } + }); +} + +setTimeout(() => { + getWeather('Delhi, India', 32.1015, 76.2731); +}, 1000);; + + + + +function getWeather(city, latitude, longitude) { + showLoader(); + const apiKey = '120d979ba5b2d0780f51872890f5ad0b'; + const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; + getMoonSetMoonRise(latitude, longitude) + + + + + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + const cityName = data.name; + const countryName = data.sys.country; + const temperature = Math.round(data.main.temp); + const tempF = Math.round(temperature * 9 / 5 + 32); + const visibility = data.visibility; + const visibilityInMiles = (visibility * 0.000621371).toFixed(0); + + const humidity = data.main.humidity; + const description = data.weather[0].description; + const clouds = data.clouds.all + const feelslike = data.main.feels_like; + const feelslikeF = Math.round(feelslike * 9 / 5 + 32); + + const iconCode = data.weather[0].icon; + document.getElementById('city-name').innerHTML = `${cityName}, ${countryName}`; + + if(SelectedTempUnit === 'celsius'){ + document.getElementById('temp').innerHTML = `${temperature}°C`; + document.getElementById('max-temp').innerHTML = `${Math.round(feelslike)}°C`; + + } else{ + document.getElementById('temp').innerHTML = `${tempF}°F`; + document.getElementById('max-temp').innerHTML = `${Math.round(feelslikeF)}°F`; + + } + + document.getElementById('description').textContent = description; + + + const weatherIcon = document.getElementById('weather-icon'); + weatherIcon.src = `weather_icon_animated/${iconCode}.svg`; + weatherIcon.alt = "Weather Icon"; + + const latitude = data.coord.lat; + const longitude = data.coord.lon; + + get24HourForecast(latitude, longitude); + + get5DayForecast(latitude, longitude); + + const windSpeedMPS = data.wind.speed; + const windSpeedMPH = (windSpeedMPS * 2.23694).toFixed(0); + + const windSpeedKPH = (windSpeedMPS * 3.6).toFixed(0); + const timeZoneOffsetSeconds = data.timezone; + const sunriseUTC = new Date((data.sys.sunrise + timeZoneOffsetSeconds) * 1000); + const sunsetUTC = new Date((data.sys.sunset + timeZoneOffsetSeconds) * 1000); + const maxTemp = data.main.temp_max; + const minTemp = data.main.temp_min; + + const options = { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }; + const sunrise = sunriseUTC.toLocaleTimeString('en-US', options); + const sunset = sunsetUTC.toLocaleTimeString('en-US', options); + + if(SelectedWindUnit === 'kilometer'){ + document.getElementById('wind-speed').textContent = `${windSpeedKPH} km/h`; + } else{ + document.getElementById('wind-speed').textContent = `${windSpeedMPH} mph`; + + } + + if(SelectedVisibiltyUnit === 'km'){ + document.getElementById('min-temp').innerHTML = `${visibility / 1000} km`; + + } else{ + document.getElementById('min-temp').innerHTML = `${visibilityInMiles} mile`; + + } + + document.getElementById('sunrise').textContent = sunrise; + document.getElementById('sunset').textContent = sunset; + document.getElementById('humidity').textContent = `${humidity}%`; + document.getElementById('clouds').textContent = `${clouds}%`; + + + + const lastUpdatedTimestamp = data.dt; + const lastUpdatedTime = new Date(lastUpdatedTimestamp * 1000).toLocaleTimeString(); + + document.getElementById('updated').textContent = `Last Updated: ${lastUpdatedTime}`; + + + + // Fetch UV Index + + const air_url = `https://api.openweathermap.org/data/2.5/air_pollution?lat=${latitude}&lon=${longitude}&appid=${apiKey}`; + + fetch(air_url) + .then(response => response.json()) + .then(air_data => { + let aqi = air_data.list[0].main.aqi; + document.getElementById('aqi-level').textContent = aqiText[aqi].level; + document.getElementById('detail_air').textContent = aqiText[aqi].message; + + + const backgroundImage = { + 1: 'air-pop-imgs/good.png', + 2: 'air-pop-imgs/fair.png', + 3: 'air-pop-imgs/moderate.png', + 4: 'air-pop-imgs/poor.png', + 5: 'air-pop-imgs/very_poor.png' + }; + + const backgroundColor = { + 1: 'rgb(11, 189, 5)', + 2: 'rgb(218, 179, 8)', + 3: 'rgb(255, 136, 0)', + 4: 'rgb(255, 0, 0)', + 5: 'rgb(183, 0, 255)' + } + + + document.getElementById('aqi_img').src = backgroundImage[aqi]; + document.getElementById('aqi-level').style.backgroundColor = backgroundColor[aqi]; + }); + + const api_uv = 'c3a14b64fd3eb5f994230183700f79d1' + + const uvUrl = `https://api.openweathermap.org/data/2.5/uvi?lat=${latitude}&lon=${longitude}&appid=${api_uv}`; + fetch(uvUrl) + .then(response => response.json()) + .then(uvData => { + const uvIndexValue = uvData.value; + const uvIndex = Math.round(uvIndexValue); + + const uvIndexInfo = uvIndexData[uvIndex]; + + const uvIndexText = uvIndexInfo.description; + + + const uvIndexElement = document.getElementById('uv-index'); + uvIndexElement.textContent = uvIndexText; + document.getElementById('uv-index').style = uvIndexInfo.style; + document.getElementById('uv_img').src = uvIndexInfo.img; + document.getElementById('detail_uv').innerHTML = uvIndexInfo.detail; + + hideLoader(); + localStorage.setItem('currentLat', latitude) + localStorage.setItem('currentLong', longitude) + + }) + .catch(error => console.error('Error fetching UV Index:', error)); + + + }) + .catch(error => { + console.error('Error fetching current weather:', error); + document.querySelector('.no_internet_error').hidden = false; + }); + + + currentLocation = null; + +} + + +const aqiText = { + 1: { + level: "Good", + message: "Air quality is considered satisfactory, and air pollution poses little or no risk.", + }, + 2: { + level: "Fair", + message: "Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution.", + + }, + 3: { + level: "Moderate", + message: "Member of sensitive groups may experience health effects. The general public is not likely to be affected.", + + }, + 4: { + level: "Poor", + message: "Everyone may begin to experience health effects; member of sensitive groups may experience more serious health effects.", + + }, + 5: { + level: "Very Poor", + message: "Health warnings of emergency conditions. The entire population is more likely to be affected.", + } +} + + + + + +function getCurrentLocationWeather() { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(position => { + const latitude = position.coords.latitude; + const longitude = position.coords.longitude; + getWeatherByCoordinates(latitude, longitude); // Call getWeatherByCoordinates with coordinates + }, handleGeolocationError); + } else { + console.error('Geolocation is not supported by this browser.'); + } +} + + + + +function getWeatherByCoordinates(latitude, longitude) { + showLoader(); + const apiKey = '120d979ba5b2d0780f51872890f5ad0b'; + const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; + getMoonSetMoonRise(latitude, longitude) + + + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + const cityName = data.name; + const countryName = data.sys.country; + const temperature = Math.round(data.main.temp); + const tempF = Math.round(temperature * 9 / 5 + 32); + + const humidity = data.main.humidity; + const clouds = data.clouds.all + const iconCode = data.weather[0].icon; + const description = data.weather[0].description; + const feelslike = data.main.feels_like; + const feelslikeF = Math.round(feelslike * 9 / 5 + 32); + document.getElementById('city-name').innerHTML = `${cityName}, ${countryName}`; + + if(SelectedTempUnit === 'celsius'){ + document.getElementById('temp').innerHTML = `${temperature}°C`; + document.getElementById('max-temp').innerHTML = `${Math.round(feelslike)}°C`; + + } else{ + document.getElementById('temp').innerHTML = `${tempF}°F`; + document.getElementById('max-temp').innerHTML = `${Math.round(feelslikeF)}°F`; + + } + + + document.getElementById('description').textContent = description; + const visibility = data.visibility; + const visibilityInMiles = (visibility * 0.000621371).toFixed(0); + + + const weatherIcon = document.getElementById('weather-icon'); + weatherIcon.src = `weather_icon_animated/${iconCode}.svg` + weatherIcon.title = `${iconCode}`; + // Fetch 24-hour forecast + get24HourForecast(latitude, longitude); + + // Fetch 5-day forecast + get5DayForecast(latitude, longitude); + + // Additional weather information + const windSpeedMPS = data.wind.speed; + const windSpeedMPH = (windSpeedMPS * 2.23694).toFixed(0); + const windSpeedKPH = (windSpeedMPS * 3.6).toFixed(0); // Convert m/s to km/h + const timeZoneOffsetSeconds = data.timezone; + const sunriseUTC = new Date((data.sys.sunrise + timeZoneOffsetSeconds) * 1000); + const sunsetUTC = new Date((data.sys.sunset + timeZoneOffsetSeconds) * 1000); + const maxTemp = data.main.temp_max; + const minTemp = data.main.temp_min; + + const options = { timeZone: 'UTC' }; // Use UTC for formatting + const sunrise = sunriseUTC.toLocaleTimeString('en-US', options); + const sunset = sunsetUTC.toLocaleTimeString('en-US', options); + + + if(SelectedWindUnit === 'kilometer'){ + document.getElementById('wind-speed').textContent = `${windSpeedKPH} km/h`; + } else{ + document.getElementById('wind-speed').textContent = `${windSpeedMPH} mph`; + + } // Display in km/h + + if(SelectedVisibiltyUnit === 'km'){ + document.getElementById('min-temp').innerHTML = `${visibility / 1000} km`; + + } else{ + document.getElementById('min-temp').innerHTML = `${visibilityInMiles} mile`; + + } + + document.getElementById('sunrise').textContent = sunrise; + document.getElementById('sunset').textContent = sunset; + + document.getElementById('humidity').textContent = ` ${humidity}% `; + document.getElementById('clouds').textContent = `${clouds}%`; + + + + + + const lastUpdatedTimestamp = data.dt; + const lastUpdatedTime = new Date(lastUpdatedTimestamp * 1000).toLocaleTimeString(); + + document.getElementById('updated').textContent = `Last Updated: ${lastUpdatedTime}`; + + + + + + + const air_url = `https://api.openweathermap.org/data/2.5/air_pollution?lat=${latitude}&lon=${longitude}&appid=${apiKey}`; + + fetch(air_url) + .then(response => response.json()) + .then(air_data => { + let aqi = air_data.list[0].main.aqi; + document.getElementById('aqi-level').textContent = aqiText[aqi].level; + document.getElementById('detail_air').textContent = aqiText[aqi].message; + + + const backgroundImage = { + 1: 'air-pop-imgs/good.png', + 2: 'air-pop-imgs/fair.png', + 3: 'air-pop-imgs/moderate.png', + 4: 'air-pop-imgs/poor.png', + 5: 'air-pop-imgs/very_poor.png' + }; + + const backgroundColor = { + 1: 'rgb(11, 189, 5)', + 2: 'rgb(218, 179, 8)', + 3: 'rgb(255, 136, 0)', + 4: 'rgb(255, 0, 0)', + 5: 'rgb(183, 0, 255)' + } + + + document.getElementById('aqi_img').src = backgroundImage[aqi]; + document.getElementById('aqi-level').style.backgroundColor = backgroundColor[aqi]; + }); + + const uvUrl = `https://api.openweathermap.org/data/2.5/uvi?lat=${latitude}&lon=${longitude}&appid=${apiKey}`; + fetch(uvUrl) + .then(response => response.json()) + .then(uvData => { + const uvIndexValue = uvData.value; + const uvIndex = Math.round(uvIndexValue); + + const uvIndexInfo = uvIndexData[uvIndex]; + + const uvIndexText = uvIndexInfo.description; + + // Set the text and class on the element + const uvIndexElement = document.getElementById('uv-index'); + uvIndexElement.textContent = uvIndexText; + document.getElementById('uv-index').style = uvIndexInfo.style; + document.getElementById('uv_img').src = uvIndexInfo.img; + document.getElementById('detail_uv').innerHTML = uvIndexInfo.detail; + + hideLoader(); + localStorage.setItem('currentLat', latitude) + localStorage.setItem('currentLong', longitude) + }) + .catch(error => console.error('Error fetching UV Index:', error)); + + + }) + .catch(error => console.error('Error fetching current weather:', error)); + + + currentLocation = { + latitude, + longitude + }; + +} + + +// Add this function to fetch the 24-hour forecast +function get24HourForecast(latitude, longitude) { + const apiKey = '28fe7b5f9a78838c639143fc517e4343'; + const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=current,minutely,daily,alerts&appid=${apiKey}&units=metric`; + + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + const forecastData = data.hourly; + display24HourForecast(forecastData); + }) + .catch(error => console.error('Error fetching 24-hour forecast:', error)); +} + + +function display24HourForecast(forecastData) { + const forecastContainer = document.getElementById('forecast'); + forecastContainer.innerHTML = ''; + + if (forecastData && forecastData.length >= 24) { + for (let i = 0; i < 24; i++) { + const forecast = forecastData[i]; + const timestamp = new Date(forecast.dt * 1000); + const time = timestamp.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).replace(/\s/g, ''); + + + const temperature = Math.round(forecast.temp); + const tempF = Math.round(temperature * 9 / 5 + 32); + + + + + const iconCode = forecast.weather[0].icon; + const description = forecast.weather[0].description; + const rainPercentage = forecast.pop * 100; + + + const forecastItem = document.createElement('div'); + forecastItem.classList.add('forecast-item'); + forecastItem.id = "forecast24"; + + if(SelectedTempUnit === 'celsius'){ + forecastItem.innerHTML = ` +

${time}

+ Weather Icon +

${temperature}°C

+

water_drop ${Math.round(rainPercentage)}%

+ +

${description}

+ `; + } else{ + forecastItem.innerHTML = ` +

${time}

+ Weather Icon +

${tempF}°F

+

water_drop ${Math.round(rainPercentage)}%

+ +

${description}

+ `; + } + + + + forecastContainer.appendChild(forecastItem); + + } + } else { + console.error('Error fetching 24-hour forecast: Data is missing or insufficient'); + } +} + +function showToast(description, time) { + const toast = document.createElement('div'); + toast.classList.add('toast'); + toast.innerHTML = `${description} at ${time}`; + + + const toastContainer = document.getElementById('toast-container'); + toastContainer.appendChild(toast); + + + setTimeout(() => { + toast.style.opacity = '0'; + + setTimeout(() => { + toastContainer.removeChild(toast); + + }, 500); + }, 3000); +} +function get5DayForecast(latitude, longitude) { + const apiKey = '28fe7b5f9a78838c639143fc517e4343'; + const apiUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; + + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + const forecastData = data.list; + display5DayForecast(forecastData); + }) + .catch(error => console.error('Error fetching 5-day forecast:', error)); +} + +function display5DayForecast(forecastData) { + const forecast5dayContainer = document.getElementById('forecast-5day'); + forecast5dayContainer.innerHTML = ''; + + const today = new Date(); + today.setHours(0, 0, 0, 0); + + for (let i = 7; i < forecastData.length; i += 8) { + const forecast = forecastData[i]; + const timestamp = new Date(forecast.dt * 1000); + + + if (timestamp.getDate() === today.getDate()) { + continue; + } + + const date = timestamp.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); + + const description = forecast.weather[0].description; + let iconCode = forecast.weather[0].icon; + const temp = Math.round(forecast.main.temp); + + const tempF = Math.round(temp * 9 / 5 + 32); + + + + + iconCode = iconCode.replace('n', 'd'); + + let tempColor; + if (temp <= -50) { + tempColor = 'blue'; + } else if (temp <= 0) { + tempColor = 'lightblue'; + } else if (temp <= 25) { + tempColor = 'rgb(9, 185, 9)'; + } else { + tempColor = 'red'; + } + + + const forecastItem = document.createElement('div'); + forecastItem.classList.add('forecast-item-forecast'); + + + if(SelectedTempUnit === 'celsius'){ + forecastItem.innerHTML = ` + + Weather Icon +

${temp}°C

+
+
+
${description} +

${date}

+
+ + `; + } else{ + forecastItem.innerHTML = ` + + Weather Icon +

${tempF}°F

+
+
+
${description} +

${date}

+
+ + `; + } + + + + const minTemp = -100; + const maxTemp = 50; + const value = (temp - minTemp) / (maxTemp - minTemp); + setTimeout(() => { + document.getElementById(`temp-bar-${i}`).value = value; + }, 0); + + + forecast5dayContainer.appendChild(forecastItem); + + } +} + + + +function showLoader() { + const loaderContainer = document.getElementById('loader-container'); + loaderContainer.style.display = 'flex'; + loaderContainer.style.opacity = '1'; +} + +// Hide the loader +function hideLoader() { + const loaderContainer = document.getElementById('loader-container'); + + loaderContainer.style.opacity = '0'; + + setTimeout(() => { + loaderContainer.style.display = 'none'; + }, 300); + + +} + + + +document.getElementById('forecast').addEventListener('scroll', function () { + var items = document.querySelectorAll('.forecast .forecast-item'); + var scrollPosition = document.getElementById('forecast').scrollLeft; + var windowWidth = document.getElementById('forecast').offsetWidth; + + items.forEach(function (item) { + var itemOffset = item.offsetLeft - scrollPosition; + var isVisible = (itemOffset >= 0 && itemOffset < windowWidth); + if (isVisible) { + item.style.scale = 1; + + } else { + item.style.scale = 0.5; + } + }); +}); + + + + + + + + + + + + + + +// document.getElementById('MenuUsage-popover').addEventListener('opening', () =>{ +// document.getElementById('menu-overLap').hidden = false; +// }); + +// document.getElementById('MenuUsage-popover').addEventListener('closing', () =>{ +// document.getElementById('menu-overLap').hidden = true; +// }); + + +function getMoonSetMoonRise(lat,long){ + fetch(`https://api.ipgeolocation.io/astronomy?apiKey=f22c81e7a0b5448e812ad5e0e1c25242&lat=${lat}&long=${long}`) + .then(response => response.json()) + .then(data => { + const moonrise = formatTimeMoonRiseMoonSet(data.moonrise); + const moonset = formatTimeMoonRiseMoonSet(data.moonset); + document.getElementById('moonrise').textContent = `${moonrise}`; + document.getElementById('moonset').textContent = `${moonset}`; + }) + } + +function formatTimeMoonRiseMoonSet(time24) { + let [hours, minutes] = time24.split(':').map(Number); + + minutes = Math.round(minutes); + + if (minutes === 60) { + minutes = 0; + hours += 1; + } + + const period = hours >= 12 ? 'PM' : 'AM'; + + hours = hours % 12 || 12; + + minutes = minutes.toString().padStart(2, '0'); + + return `${hours}:${minutes} ${period}`; +} + +function refreshWeather(){ + const latSend = localStorage.getItem('currentLat') + const longSend = localStorage.getItem('currentLong') + + getWeather(' ',latSend, longSend) +} \ No newline at end of file diff --git a/app/src/main/assets/app/apply.js b/app/src/main/assets/app/apply.js new file mode 100644 index 000000000..6c177504b --- /dev/null +++ b/app/src/main/assets/app/apply.js @@ -0,0 +1,17 @@ +const themeType = localStorage.getItem('ThemeMode') || 'light'; + +if (!localStorage.getItem('ThemeMode')) { + localStorage.setItem('ThemeMode', 'light'); + +} + +const themeColorVariation = localStorage.getItem('ColorScheme') || 'Material You (Blue bright P40)' ; + + +if (!localStorage.getItem('ColorScheme')) { + localStorage.setItem('ColorScheme', 'Material You (Blue bright P40)'); + +} + +document.documentElement.setAttribute('data-theme', themeType); +document.documentElement.setAttribute('data-color-theme', themeColorVariation); diff --git a/app/src/main/assets/app/navigate.js b/app/src/main/assets/app/navigate.js new file mode 100644 index 000000000..c9f1366a8 --- /dev/null +++ b/app/src/main/assets/app/navigate.js @@ -0,0 +1,26 @@ + + + + +window.transitionToPage = function(href) { + + document.querySelector('body').style.opacity = '0'; + + setTimeout(function() { + window.location.href = href + + }, 500); + + +} + + + + + + +document.addEventListener('DOMContentLoaded', function(event) { + + document.querySelector('body').style.opacity = '1'; + +}); diff --git a/app/src/main/assets/bundle.js b/app/src/main/assets/bundle.js new file mode 100644 index 000000000..1480a780c --- /dev/null +++ b/app/src/main/assets/bundle.js @@ -0,0 +1,13402 @@ +/****************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ +/* global Reflect, Promise, SuppressedError, Symbol */ + + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { + var e = new Error(message); + return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; +}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$3=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);}; + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$2=globalThis,e$8=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$7=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$8&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$7.set(s,t));}return t}toString(){return this.cssText}};const r$7=t=>new n$7("string"==typeof t?t:t+"",void 0,s$3),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$7(o,t,s$3)},S$1=(s,o)=>{if(e$8)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$8?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$7(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$3,defineProperty:e$7,getOwnPropertyDescriptor:r$6,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$6,getPrototypeOf:n$6}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$3=c$1?c$1.emptyScript:"",p$1=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$3:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$2=(t,s)=>!i$3(t,s),y$1={attribute:!0,type:String,converter:u$2,reflect:!1,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$7(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$6(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$6(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$6(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$Eg=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$ES??=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$ES?.splice(this._$ES.indexOf(t)>>>0,1);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$ES?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$ES?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EO(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i,e=!1,r){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$2)(e?r:this[t],s))return;this.C(t,s,i);}!1===this.isUpdatePending&&(this._$Eg=this._$EP());}C(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$EP(){this.isUpdatePending=!0;try{await this._$Eg;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.C(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$ES?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$ET();}catch(s){throw t=!1,this._$ET(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$ES?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$ET(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Eg}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EO(t,this[t]))),this._$ET();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$2.reactiveElementVersions??=[]).push("2.0.0"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const o$5={attribute:!0,type:String,converter:u$2,reflect:!1,hasChanged:f$2},r$5=(t=o$5,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n$5(t){return (e,o)=>"object"==typeof o?r$5(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function r$4(r){return n$5({...r,state:!0,attribute:!1})} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const e$6=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function e$5(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$6(n,s,{get(){return o(this)}})}} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +let e$4;function r$3(r){return (n,o)=>e$6(n,o,{get(){return (this.renderRoot??(e$4??=document.createDocumentFragment())).querySelectorAll(r)}})} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +function r$2(r){return (n,e)=>e$6(n,e,{async get(){return await this.updateComplete,this.renderRoot?.querySelector(r)??null}})} + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function o$4(o){return (e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e$6(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function n$4(n){return (o,r)=>{const{slot:e}=n??{},s="slot"+(e?`[name=${e}]`:":not([name])");return e$6(o,r,{get(){const t=this.renderRoot?.querySelector(s);return t?.assignedNodes(n)??[]}})}} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=globalThis,i$2=t$1.trustedTypes,s$2=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$lit$",h=`lit$${(Math.random()+"").slice(9)}$`,o$3="?"+h,n$3=`<${o$3}>`,r$1=document,l$2=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$1=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m$1=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),w=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),A=new WeakMap,E=r$1.createTreeWalker(r$1,129);function C(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const P=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g:p):c===g||c===p?c=m$1:c===v||c===_?c=f$1:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$3+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [C(t,l+(t[s]||"")+(2===i?"":"")),o]};class V{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=P(t,s);if(this.el=V.createElement(f,n),E.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=E.nextNode())&&d.length0){r.textContent=i$2?i$2.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=T;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=N(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==w,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new M(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */let s$1 = class s extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=j(i,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return w}};s$1._$litElement$=!0,s$1[("finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s$1});const r=globalThis.litElementPolyfillSupport;r?.({LitElement:s$1});(globalThis.litElementVersions??=[]).push("4.0.0"); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const o$2=!1; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A component for elevation. + */ +class Elevation extends s$1 { + connectedCallback() { + super.connectedCallback(); + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } + render() { + return x ``; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./elevation/internal/elevation-styles.css. +const styles$U = i$4 `:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}:host{display:flex;pointer-events:none;transition-property:box-shadow,opacity}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity;--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000))}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15} +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * The `` custom element with default styles. + * + * Elevation is the relative distance between two surfaces along the z-axis. + * + * @final + * @suppress {visibility} + */ +let MdElevation = class MdElevation extends Elevation { +}; +MdElevation.styles = [styles$U]; +MdElevation = __decorate([ + t$3('md-elevation') +], MdElevation); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A key to retrieve an `Attachable` element's `AttachableController` from a + * global `MutationObserver`. + */ +const ATTACHABLE_CONTROLLER = Symbol('attachableController'); +let FOR_ATTRIBUTE_OBSERVER; +{ + /** + * A global `MutationObserver` that reacts to `for` attribute changes on + * `Attachable` elements. If the `for` attribute changes, the controller will + * re-attach to the new referenced element. + */ + FOR_ATTRIBUTE_OBSERVER = new MutationObserver((records) => { + for (const record of records) { + // When a control's `for` attribute changes, inform its + // `AttachableController` to update to a new control. + record.target[ATTACHABLE_CONTROLLER]?.hostConnected(); + } + }); +} +/** + * A controller that provides an implementation for `Attachable` elements. + * + * @example + * ```ts + * class MyElement extends LitElement implements Attachable { + * get control() { return this.attachableController.control; } + * + * private readonly attachableController = new AttachableController( + * this, + * (previousControl, newControl) => { + * previousControl?.removeEventListener('click', this.handleClick); + * newControl?.addEventListener('click', this.handleClick); + * } + * ); + * + * // Implement remaining `Attachable` properties/methods that call the + * // controller's properties/methods. + * } + * ``` + */ +class AttachableController { + get htmlFor() { + return this.host.getAttribute('for'); + } + set htmlFor(htmlFor) { + if (htmlFor === null) { + this.host.removeAttribute('for'); + } + else { + this.host.setAttribute('for', htmlFor); + } + } + get control() { + if (this.host.hasAttribute('for')) { + if (!this.htmlFor || !this.host.isConnected) { + return null; + } + return this.host.getRootNode().querySelector(`#${this.htmlFor}`); + } + return this.currentControl || this.host.parentElement; + } + set control(control) { + if (control) { + this.attach(control); + } + else { + this.detach(); + } + } + /** + * Creates a new controller for an `Attachable` element. + * + * @param host The `Attachable` element. + * @param onControlChange A callback with two parameters for the previous and + * next control. An `Attachable` element may perform setup or teardown + * logic whenever the control changes. + */ + constructor(host, onControlChange) { + this.host = host; + this.onControlChange = onControlChange; + this.currentControl = null; + host.addController(this); + host[ATTACHABLE_CONTROLLER] = this; + FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] }); + } + attach(control) { + if (control === this.currentControl) { + return; + } + this.setCurrentControl(control); + // When imperatively attaching, remove the `for` attribute so + // that the attached control is used instead of a referenced one. + this.host.removeAttribute('for'); + } + detach() { + this.setCurrentControl(null); + // When imperatively detaching, add an empty `for=""` attribute. This will + // ensure the control is `null` rather than the `parentElement`. + this.host.setAttribute('for', ''); + } + /** @private */ + hostConnected() { + this.setCurrentControl(this.control); + } + /** @private */ + hostDisconnected() { + this.setCurrentControl(null); + } + setCurrentControl(control) { + this.onControlChange(this.currentControl, control); + this.currentControl = control; + } +} + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Events that the focus ring listens to. + */ +const EVENTS$1 = ['focusin', 'focusout', 'pointerdown']; +/** + * A focus ring component. + * + * @fires visibility-changed {Event} Fired whenever `visible` changes. + */ +class FocusRing extends s$1 { + constructor() { + super(...arguments); + /** + * Makes the focus ring visible. + */ + this.visible = false; + /** + * Makes the focus ring animate inwards instead of outwards. + */ + this.inward = false; + this.attachableController = new AttachableController(this, this.onControlChange.bind(this)); + } + get htmlFor() { + return this.attachableController.htmlFor; + } + set htmlFor(htmlFor) { + this.attachableController.htmlFor = htmlFor; + } + get control() { + return this.attachableController.control; + } + set control(control) { + this.attachableController.control = control; + } + attach(control) { + this.attachableController.attach(control); + } + detach() { + this.attachableController.detach(); + } + connectedCallback() { + super.connectedCallback(); + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } + /** @private */ + handleEvent(event) { + if (event[HANDLED_BY_FOCUS_RING]) { + // This ensures the focus ring does not activate when multiple focus rings + // are used within a single component. + return; + } + switch (event.type) { + default: + return; + case 'focusin': + this.visible = this.control?.matches(':focus-visible') ?? false; + break; + case 'focusout': + case 'pointerdown': + this.visible = false; + break; + } + event[HANDLED_BY_FOCUS_RING] = true; + } + onControlChange(prev, next) { + for (const event of EVENTS$1) { + prev?.removeEventListener(event, this); + next?.addEventListener(event, this); + } + } + update(changed) { + if (changed.has('visible')) { + // This logic can be removed once the `:has` selector has been introduced + // to Firefox. This is necessary to allow correct submenu styles. + this.dispatchEvent(new Event('visibility-changed')); + } + super.update(changed); + } +} +__decorate([ + n$5({ type: Boolean, reflect: true }) +], FocusRing.prototype, "visible", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true }) +], FocusRing.prototype, "inward", void 0); +const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing'); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./focus/internal/focus-ring-styles.css. +const styles$T = i$4 `:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/267336424): add docs + * + * @final + * @suppress {visibility} + */ +let MdFocusRing = class MdFocusRing extends FocusRing { +}; +MdFocusRing.styles = [styles$T]; +MdFocusRing = __decorate([ + t$3('md-focus-ring') +], MdFocusRing); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.it){this.it=new Set,void 0!==s.strings&&(this.st=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.st?.has(t)&&this.it.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.it)t in i||(r.remove(t),this.it.delete(t));for(const t in i){const s=!!i[t];s===this.it.has(t)||this.st?.has(t)||(s?(r.add(t),this.it.add(t)):(r.remove(t),this.it.delete(t)));}return w}}); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Easing functions to use for web animations. + * + * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy. + * + * TODO(b/241113345): replace with tokens + */ +const EASING = { + STANDARD: 'cubic-bezier(0.2, 0, 0, 1)', + STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)', + STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)', + EMPHASIZED: 'cubic-bezier(.3,0,0,1)', + EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)', + EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)', +}; +/** + * Creates an `AnimationSignal` that can be used to cancel a previous task. + * + * @example + * class MyClass { + * private labelAnimationSignal = createAnimationSignal(); + * + * private async animateLabel() { + * // Start of the task. Previous tasks will be canceled. + * const signal = this.labelAnimationSignal.start(); + * + * // Do async work... + * if (signal.aborted) { + * // Use AbortSignal to check if a request was made to abort after some + * // asynchronous work. + * return; + * } + * + * const animation = this.animate(...); + * // Add event listeners to be notified when the task should be canceled. + * signal.addEventListener('abort', () => { + * animation.cancel(); + * }); + * + * animation.addEventListener('finish', () => { + * // Tell the signal that the current task is finished. + * this.labelAnimationSignal.finish(); + * }); + * } + * } + * + * @return An `AnimationSignal`. + */ +function createAnimationSignal() { + // The current animation's AbortController + let animationAbortController = null; + return { + start() { + // Tell the previous animation to cancel. + animationAbortController?.abort(); + // Set up a new AbortController for the current animation. + animationAbortController = new AbortController(); + // Provide the AbortSignal so that the caller can check aborted status + // and add listeners. + return animationAbortController.signal; + }, + finish() { + animationAbortController = null; + }, + }; +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const PRESS_GROW_MS = 450; +const MINIMUM_PRESS_MS = 225; +const INITIAL_ORIGIN_SCALE = 0.2; +const PADDING = 10; +const SOFT_EDGE_MINIMUM_SIZE = 75; +const SOFT_EDGE_CONTAINER_RATIO = 0.35; +const PRESS_PSEUDO = '::after'; +const ANIMATION_FILL = 'forwards'; +/** + * Interaction states for the ripple. + * + * On Touch: + * - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE` + * - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE` + * + * On Mouse or Pen: + * - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE` + */ +var State; +(function (State) { + /** + * Initial state of the control, no touch in progress. + * + * Transitions: + * - on touch down: transition to `TOUCH_DELAY`. + * - on mouse down: transition to `WAITING_FOR_CLICK`. + */ + State[State["INACTIVE"] = 0] = "INACTIVE"; + /** + * Touch down has been received, waiting to determine if it's a swipe or + * scroll. + * + * Transitions: + * - on touch up: begin press; transition to `WAITING_FOR_CLICK`. + * - on cancel: transition to `INACTIVE`. + * - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`. + */ + State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY"; + /** + * A touch has been deemed to be a press + * + * Transitions: + * - on up: transition to `WAITING_FOR_CLICK`. + */ + State[State["HOLDING"] = 2] = "HOLDING"; + /** + * The user touch has finished, transition into rest state. + * + * Transitions: + * - on click end press; transition to `INACTIVE`. + */ + State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK"; +})(State || (State = {})); +/** + * Events that the ripple listens to. + */ +const EVENTS = [ + 'click', + 'contextmenu', + 'pointercancel', + 'pointerdown', + 'pointerenter', + 'pointerleave', + 'pointerup', +]; +/** + * Delay reacting to touch so that we do not show the ripple for a swipe or + * scroll interaction. + */ +const TOUCH_DELAY_MS = 150; +/** + * Used to detect if HCM is active. Events do not process during HCM when the + * ripple is not displayed. + */ +const FORCED_COLORS = window.matchMedia('(forced-colors: active)'); +/** + * A ripple component. + */ +class Ripple extends s$1 { + constructor() { + super(...arguments); + /** + * Disables the ripple. + */ + this.disabled = false; + this.hovered = false; + this.pressed = false; + this.rippleSize = ''; + this.rippleScale = ''; + this.initialSize = 0; + this.state = State.INACTIVE; + this.checkBoundsAfterContextMenu = false; + this.attachableController = new AttachableController(this, this.onControlChange.bind(this)); + } + get htmlFor() { + return this.attachableController.htmlFor; + } + set htmlFor(htmlFor) { + this.attachableController.htmlFor = htmlFor; + } + get control() { + return this.attachableController.control; + } + set control(control) { + this.attachableController.control = control; + } + attach(control) { + this.attachableController.attach(control); + } + detach() { + this.attachableController.detach(); + } + connectedCallback() { + super.connectedCallback(); + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } + render() { + const classes = { + 'hovered': this.hovered, + 'pressed': this.pressed, + }; + return x `
`; + } + update(changedProps) { + if (changedProps.has('disabled') && this.disabled) { + this.hovered = false; + this.pressed = false; + } + super.update(changedProps); + } + /** + * TODO(b/269799771): make private + * @private only public for slider + */ + handlePointerenter(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.hovered = true; + } + /** + * TODO(b/269799771): make private + * @private only public for slider + */ + handlePointerleave(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.hovered = false; + // release a held mouse or pen press that moves outside the element + if (this.state !== State.INACTIVE) { + this.endPressAnimation(); + } + } + handlePointerup(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + if (this.state === State.HOLDING) { + this.state = State.WAITING_FOR_CLICK; + return; + } + if (this.state === State.TOUCH_DELAY) { + this.state = State.WAITING_FOR_CLICK; + this.startPressAnimation(this.rippleStartEvent); + return; + } + } + async handlePointerdown(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.rippleStartEvent = event; + if (!this.isTouch(event)) { + this.state = State.WAITING_FOR_CLICK; + this.startPressAnimation(event); + return; + } + // after a longpress contextmenu event, an extra `pointerdown` can be + // dispatched to the pressed element. Check that the down is within + // bounds of the element in this case. + if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) { + return; + } + this.checkBoundsAfterContextMenu = false; + // Wait for a hold after touch delay + this.state = State.TOUCH_DELAY; + await new Promise((resolve) => { + setTimeout(resolve, TOUCH_DELAY_MS); + }); + if (this.state !== State.TOUCH_DELAY) { + return; + } + this.state = State.HOLDING; + this.startPressAnimation(event); + } + handleClick() { + // Click is a MouseEvent in Firefox and Safari, so we cannot use + // `shouldReactToEvent` + if (this.disabled) { + return; + } + if (this.state === State.WAITING_FOR_CLICK) { + this.endPressAnimation(); + return; + } + if (this.state === State.INACTIVE) { + // keyboard synthesized click event + this.startPressAnimation(); + this.endPressAnimation(); + } + } + handlePointercancel(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.endPressAnimation(); + } + handleContextmenu() { + if (this.disabled) { + return; + } + this.checkBoundsAfterContextMenu = true; + this.endPressAnimation(); + } + determineRippleSize() { + const { height, width } = this.getBoundingClientRect(); + const maxDim = Math.max(height, width); + const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE); + const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE); + const hypotenuse = Math.sqrt(width ** 2 + height ** 2); + const maxRadius = hypotenuse + PADDING; + this.initialSize = initialSize; + this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`; + this.rippleSize = `${initialSize}px`; + } + getNormalizedPointerEventCoords(pointerEvent) { + const { scrollX, scrollY } = window; + const { left, top } = this.getBoundingClientRect(); + const documentX = scrollX + left; + const documentY = scrollY + top; + const { pageX, pageY } = pointerEvent; + return { x: pageX - documentX, y: pageY - documentY }; + } + getTranslationCoordinates(positionEvent) { + const { height, width } = this.getBoundingClientRect(); + // end in the center + const endPoint = { + x: (width - this.initialSize) / 2, + y: (height - this.initialSize) / 2, + }; + let startPoint; + if (positionEvent instanceof PointerEvent) { + startPoint = this.getNormalizedPointerEventCoords(positionEvent); + } + else { + startPoint = { + x: width / 2, + y: height / 2, + }; + } + // center around start point + startPoint = { + x: startPoint.x - this.initialSize / 2, + y: startPoint.y - this.initialSize / 2, + }; + return { startPoint, endPoint }; + } + startPressAnimation(positionEvent) { + if (!this.mdRoot) { + return; + } + this.pressed = true; + this.growAnimation?.cancel(); + this.determineRippleSize(); + const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent); + const translateStart = `${startPoint.x}px, ${startPoint.y}px`; + const translateEnd = `${endPoint.x}px, ${endPoint.y}px`; + this.growAnimation = this.mdRoot.animate({ + top: [0, 0], + left: [0, 0], + height: [this.rippleSize, this.rippleSize], + width: [this.rippleSize, this.rippleSize], + transform: [ + `translate(${translateStart}) scale(1)`, + `translate(${translateEnd}) scale(${this.rippleScale})`, + ], + }, { + pseudoElement: PRESS_PSEUDO, + duration: PRESS_GROW_MS, + easing: EASING.STANDARD, + fill: ANIMATION_FILL, + }); + } + async endPressAnimation() { + this.rippleStartEvent = undefined; + this.state = State.INACTIVE; + const animation = this.growAnimation; + let pressAnimationPlayState = Infinity; + if (typeof animation?.currentTime === 'number') { + pressAnimationPlayState = animation.currentTime; + } + else if (animation?.currentTime) { + pressAnimationPlayState = animation.currentTime.to('ms').value; + } + if (pressAnimationPlayState >= MINIMUM_PRESS_MS) { + this.pressed = false; + return; + } + await new Promise((resolve) => { + setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState); + }); + if (this.growAnimation !== animation) { + // A new press animation was started. The old animation was canceled and + // should not finish the pressed state. + return; + } + this.pressed = false; + } + /** + * Returns `true` if + * - the ripple element is enabled + * - the pointer is primary for the input type + * - the pointer is the pointer that started the interaction, or will start + * the interaction + * - the pointer is a touch, or the pointer state has the primary button + * held, or the pointer is hovering + */ + shouldReactToEvent(event) { + if (this.disabled || !event.isPrimary) { + return false; + } + if (this.rippleStartEvent && + this.rippleStartEvent.pointerId !== event.pointerId) { + return false; + } + if (event.type === 'pointerenter' || event.type === 'pointerleave') { + return !this.isTouch(event); + } + const isPrimaryButton = event.buttons === 1; + return this.isTouch(event) || isPrimaryButton; + } + /** + * Check if the event is within the bounds of the element. + * + * This is only needed for the "stuck" contextmenu longpress on Chrome. + */ + inBounds({ x, y }) { + const { top, left, bottom, right } = this.getBoundingClientRect(); + return x >= left && x <= right && y >= top && y <= bottom; + } + isTouch({ pointerType }) { + return pointerType === 'touch'; + } + /** @private */ + async handleEvent(event) { + if (FORCED_COLORS?.matches) { + // Skip event logic since the ripple is `display: none`. + return; + } + switch (event.type) { + case 'click': + this.handleClick(); + break; + case 'contextmenu': + this.handleContextmenu(); + break; + case 'pointercancel': + this.handlePointercancel(event); + break; + case 'pointerdown': + await this.handlePointerdown(event); + break; + case 'pointerenter': + this.handlePointerenter(event); + break; + case 'pointerleave': + this.handlePointerleave(event); + break; + case 'pointerup': + this.handlePointerup(event); + break; + } + } + onControlChange(prev, next) { + for (const event of EVENTS) { + prev?.removeEventListener(event, this); + next?.addEventListener(event, this); + } + } +} +__decorate([ + n$5({ type: Boolean, reflect: true }) +], Ripple.prototype, "disabled", void 0); +__decorate([ + r$4() +], Ripple.prototype, "hovered", void 0); +__decorate([ + r$4() +], Ripple.prototype, "pressed", void 0); +__decorate([ + e$5('.surface') +], Ripple.prototype, "mdRoot", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./ripple/internal/ripple-styles.css. +const styles$S = i$4 `:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms} +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Ripples, also known as state layers, are visual indicators used to + * communicate the status of a component or interactive element. + * + * @description A state layer is a semi-transparent covering on an element that + * indicates its state. State layers provide a systematic approach to + * visualizing states by using opacity. A layer can be applied to an entire + * element or in a circular shape and only one state layer can be applied at a + * given time. + * + * @final + * @suppress {visibility} + */ +let MdRipple = class MdRipple extends Ripple { +}; +MdRipple.styles = [styles$S]; +MdRipple = __decorate([ + t$3('md-ripple') +], MdRipple); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Accessibility Object Model reflective aria properties. + */ +const ARIA_PROPERTIES = [ + 'ariaAtomic', + 'ariaAutoComplete', + 'ariaBusy', + 'ariaChecked', + 'ariaColCount', + 'ariaColIndex', + 'ariaColSpan', + 'ariaCurrent', + 'ariaDisabled', + 'ariaExpanded', + 'ariaHasPopup', + 'ariaHidden', + 'ariaInvalid', + 'ariaKeyShortcuts', + 'ariaLabel', + 'ariaLevel', + 'ariaLive', + 'ariaModal', + 'ariaMultiLine', + 'ariaMultiSelectable', + 'ariaOrientation', + 'ariaPlaceholder', + 'ariaPosInSet', + 'ariaPressed', + 'ariaReadOnly', + 'ariaRequired', + 'ariaRoleDescription', + 'ariaRowCount', + 'ariaRowIndex', + 'ariaRowSpan', + 'ariaSelected', + 'ariaSetSize', + 'ariaSort', + 'ariaValueMax', + 'ariaValueMin', + 'ariaValueNow', + 'ariaValueText', +]; +/** + * Accessibility Object Model aria attributes. + */ +ARIA_PROPERTIES.map(ariaPropertyToAttribute); +/** + * Converts an AOM aria property into its corresponding attribute. + * + * @example + * ariaPropertyToAttribute('ariaLabel'); // 'aria-label' + * + * @param property The aria property. + * @return The aria attribute. + */ +function ariaPropertyToAttribute(property) { + return property + .replace('aria', 'aria-') + // IDREF attributes also include an "Element" or "Elements" suffix + .replace(/Elements?/g, '') + .toLowerCase(); +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Sets up a `ReactiveElement` constructor to enable updates when delegating + * aria attributes. Elements may bind `this.aria*` properties to `aria-*` + * attributes in their render functions. + * + * This function will: + * - Call `requestUpdate()` when an aria attribute changes. + * - Add `role="presentation"` to the host. + * + * NOTE: The following features are not currently supported: + * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`) + * - Delegating the `role` attribute + * + * @example + * class XButton extends LitElement { + * static { + * requestUpdateOnAriaChange(XButton); + * } + * + * protected override render() { + * return html` + * + * `; + * } + * } + * + * @param ctor The `ReactiveElement` constructor to patch. + */ +function requestUpdateOnAriaChange(ctor) { + for (const ariaProperty of ARIA_PROPERTIES) { + ctor.createProperty(ariaProperty, { + attribute: ariaPropertyToAttribute(ariaProperty), + reflect: true, + }); + } + ctor.addInitializer((element) => { + const controller = { + hostConnected() { + element.setAttribute('role', 'presentation'); + }, + }; + element.addController(controller); + }); +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A unique symbol used for protected access to an instance's + * `ElementInternals`. + * + * @example + * ```ts + * class MyElement extends mixinElementInternals(LitElement) { + * constructor() { + * super(); + * this[internals].role = 'button'; + * } + * } + * ``` + */ +const internals = Symbol('internals'); +// Private symbols +const privateInternals = Symbol('privateInternals'); +/** + * Mixes in an attached `ElementInternals` instance. + * + * This mixin is only needed when other shared code needs access to a + * component's `ElementInternals`, such as form-associated mixins. + * + * @param base The class to mix functionality into. + * @return The provided class with `WithElementInternals` mixed in. + */ +function mixinElementInternals(base) { + class WithElementInternalsElement extends base { + get [internals]() { + // Create internals in getter so that it can be used in methods called on + // construction in `ReactiveElement`, such as `requestUpdate()`. + if (!this[privateInternals]) { + // Cast needed for closure + this[privateInternals] = this.attachInternals(); + } + return this[privateInternals]; + } + } + return WithElementInternalsElement; +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Sets up an element's constructor to enable form submission. The element + * instance should be form associated and have a `type` property. + * + * A click listener is added to each element instance. If the click is not + * default prevented, it will submit the element's form, if any. + * + * @example + * ```ts + * class MyElement extends mixinElementInternals(LitElement) { + * static { + * setupFormSubmitter(MyElement); + * } + * + * static formAssociated = true; + * + * type: FormSubmitterType = 'submit'; + * } + * ``` + * + * @param ctor The form submitter element's constructor. + */ +function setupFormSubmitter(ctor) { + ctor.addInitializer((instance) => { + const submitter = instance; + submitter.addEventListener('click', async (event) => { + const { type, [internals]: elementInternals } = submitter; + const { form } = elementInternals; + if (!form || type === 'button') { + return; + } + // Wait a full task for event bubbling to complete. + await new Promise((resolve) => { + setTimeout(resolve); + }); + if (event.defaultPrevented) { + return; + } + if (type === 'reset') { + form.reset(); + return; + } + // form.requestSubmit(submitter) does not work with form associated custom + // elements. This patches the dispatched submit event to add the correct + // `submitter`. + // See https://github.com/WICG/webcomponents/issues/814 + form.addEventListener('submit', (submitEvent) => { + Object.defineProperty(submitEvent, 'submitter', { + configurable: true, + enumerable: true, + get: () => submitter, + }); + }, { capture: true, once: true }); + elementInternals.setFormValue(submitter.value); + form.requestSubmit(); + }); + }); +} + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Dispatches a click event to the given element that triggers a native action, + * but is not composed and therefore is not seen outside the element. + * + * This is useful for responding to an external click event on the host element + * that should trigger an internal action like a button click. + * + * Note, a helper is provided because setting this up correctly is a bit tricky. + * In particular, calling `click` on an element creates a composed event, which + * is not desirable, and a manually dispatched event must specifically be a + * `MouseEvent` to trigger a native action. + * + * @example + * hostClickListener = (event: MouseEvent) { + * if (isActivationClick(event)) { + * this.dispatchActivationClick(this.buttonElement); + * } + * } + * + */ +function dispatchActivationClick(element) { + const event = new MouseEvent('click', { bubbles: true }); + element.dispatchEvent(event); + return event; +} +/** + * Returns true if the click event should trigger an activation behavior. The + * behavior is defined by the element and is whatever it should do when + * clicked. + * + * Typically when an element needs to handle a click, the click is generated + * from within the element and an event listener within the element implements + * the needed behavior; however, it's possible to fire a click directly + * at the element that the element should handle. This method helps + * distinguish these "external" clicks. + * + * An "external" click can be triggered in a number of ways: via a click + * on an associated label for a form associated element, calling + * `element.click()`, or calling + * `element.dispatchEvent(new MouseEvent('click', ...))`. + * + * Also works around Firefox issue + * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching + * events for a microtask after called. + * + * @example + * hostClickListener = (event: MouseEvent) { + * if (isActivationClick(event)) { + * this.dispatchActivationClick(this.buttonElement); + * } + * } + * + */ +function isActivationClick(event) { + // Event must start at the event target. + if (event.currentTarget !== event.target) { + return false; + } + // Event must not be retargeted from shadowRoot. + if (event.composedPath()[0] !== event.target) { + return false; + } + // Target must not be disabled; this should only occur for a synthetically + // dispatched click. + if (event.target.disabled) { + return false; + } + // This is an activation if the event should not be squelched. + return !squelchEvent(event); +} +// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576) +// Remove when Firefox bug is addressed. +function squelchEvent(event) { + const squelched = isSquelchingEvents; + if (squelched) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + squelchEventsForMicrotask(); + return squelched; +} +// Ignore events for one microtask only. +let isSquelchingEvents = false; +async function squelchEventsForMicrotask() { + isSquelchingEvents = true; + // Need to pause for just one microtask. + // tslint:disable-next-line + await null; + isSquelchingEvents = false; +} + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Separate variable needed for closure. +const buttonBaseClass = mixinElementInternals(s$1); +/** + * A button component. + */ +class Button extends buttonBaseClass { + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + this.setAttribute('name', name); + } + /** + * The associated form element with which this element's value will submit. + */ + get form() { + return this[internals].form; + } + constructor() { + super(); + /** + * Whether or not the button is disabled. + */ + this.disabled = false; + /** + * The URL that the link button points to. + */ + this.href = ''; + /** + * Where to display the linked `href` URL for a link button. Common options + * include `_blank` to open in a new tab. + */ + this.target = ''; + /** + * Whether to render the icon at the inline end of the label rather than the + * inline start. + * + * _Note:_ Link buttons cannot have trailing icons. + */ + this.trailingIcon = false; + /** + * Whether to display the icon or not. + */ + this.hasIcon = false; + /** + * The default behavior of the button. May be "text", "reset", or "submit" + * (default). + */ + this.type = 'submit'; + /** + * The value added to a form with the button's name when the button submits a + * form. + */ + this.value = ''; + this.handleActivationClick = (event) => { + if (!isActivationClick(event) || !this.buttonElement) { + return; + } + this.focus(); + dispatchActivationClick(this.buttonElement); + }; + { + this.addEventListener('click', this.handleActivationClick); + } + } + focus() { + this.buttonElement?.focus(); + } + blur() { + this.buttonElement?.blur(); + } + render() { + // Link buttons may not be disabled + const isDisabled = this.disabled && !this.href; + const buttonOrLink = this.href ? this.renderLink() : this.renderButton(); + // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use + // the same ID for different elements, so we change the ID instead. + const buttonId = this.href ? 'link' : 'button'; + return x ` + ${this.renderElevationOrOutline?.()} +
+ + + ${buttonOrLink} + `; + } + renderButton() { + // Needed for closure conformance + const { ariaLabel, ariaHasPopup, ariaExpanded } = this; + return x ``; + } + renderLink() { + // Needed for closure conformance + const { ariaLabel, ariaHasPopup, ariaExpanded } = this; + return x `${this.renderContent()} + `; + } + renderContent() { + const icon = x ``; + return x ` + + ${this.trailingIcon ? T : icon} + + ${this.trailingIcon ? icon : T} + `; + } + handleSlotChange() { + this.hasIcon = this.assignedIcons.length > 0; + } +} +(() => { + requestUpdateOnAriaChange(Button); + setupFormSubmitter(Button); +})(); +/** @nocollapse */ +Button.formAssociated = true; +/** @nocollapse */ +Button.shadowRootOptions = { + mode: 'open', + delegatesFocus: true, +}; +__decorate([ + n$5({ type: Boolean, reflect: true }) +], Button.prototype, "disabled", void 0); +__decorate([ + n$5() +], Button.prototype, "href", void 0); +__decorate([ + n$5() +], Button.prototype, "target", void 0); +__decorate([ + n$5({ type: Boolean, attribute: 'trailing-icon', reflect: true }) +], Button.prototype, "trailingIcon", void 0); +__decorate([ + n$5({ type: Boolean, attribute: 'has-icon', reflect: true }) +], Button.prototype, "hasIcon", void 0); +__decorate([ + n$5() +], Button.prototype, "type", void 0); +__decorate([ + n$5({ reflect: true }) +], Button.prototype, "value", void 0); +__decorate([ + e$5('.button') +], Button.prototype, "buttonElement", void 0); +__decorate([ + o$4({ slot: 'icon', flatten: true }) +], Button.prototype, "assignedIcons", void 0); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An elevated button component. + */ +class ElevatedButton extends Button { + renderElevationOrOutline() { + return x ``; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/elevated-styles.css. +const styles$R = i$4 `:host{--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-elevated-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-elevated-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-elevated-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-elevated-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-elevated-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-elevated-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-elevated-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-elevated-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-elevated-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-elevated-button-icon-size, 18px);--_pressed-icon-color: var(--md-elevated-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-elevated-button-leading-space, 24px);--_trailing-space: var(--md-elevated-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-elevated-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-elevated-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-elevated-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-elevated-button-with-trailing-icon-trailing-space, 16px)} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/shared-elevation-styles.css. +const styles$Q = i$4 `md-elevation{transition-duration:280ms}:host([disabled]) md-elevation{transition:none}md-elevation{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}:host(:focus-within) md-elevation{--md-elevation-level: var(--_focus-container-elevation)}:host(:hover) md-elevation{--md-elevation-level: var(--_hover-container-elevation)}:host(:active) md-elevation{--md-elevation-level: var(--_pressed-container-elevation)}:host([disabled]) md-elevation{--md-elevation-level: var(--_disabled-container-elevation)} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/shared-styles.css. +const styles$P = i$4 `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:8px;min-height:var(--_container-height);outline:none;padding-block:calc((var(--_container-height) - max(var(--_label-text-line-height),var(--_icon-size)))/2);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);place-content:center;place-items:center;position:relative;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);text-overflow:ellipsis;text-wrap:nowrap;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{border-radius:inherit;cursor:inherit;display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;min-width:calc(64px - var(--_leading-space) - var(--_trailing-space));width:100%;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding:0;gap:inherit;text-transform:inherit}.button::-moz-focus-inner{padding:0;border:0}:host(:hover) .button{color:var(--_hover-label-text-color)}:host(:focus-within) .button{color:var(--_focus-label-text-color)}:host(:active) .button{color:var(--_pressed-label-text-color)}.background{background-color:var(--_container-color);border-radius:inherit;inset:0;position:absolute}.label{overflow:hidden}:is(.button,.label,.label slot),.label ::slotted(*){text-overflow:inherit}:host([disabled]) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}:host([disabled]) .background{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.background{border:1px solid CanvasText}:host([disabled]){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-color: GrayText;--_disabled-label-text-opacity: 1}}:host([has-icon]:not([trailing-icon])){padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}:host([has-icon][trailing-icon]){padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;flex-shrink:0;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus-within) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([disabled]) ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}:host([touch-target=none]) .touch{display:none} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Medium emphasis – For important actions that don’t distract + * from other onscreen elements. + * + * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter + * background color and a shadow. To prevent shadow creep, only use them when + * absolutely necessary, such as when the button requires visual separation from + * a patterned background. + * + * __Example usages:__ + * - Reply + * - View all + * - Add to cart + * - Take out of trash + * + * @final + * @suppress {visibility} + */ +let MdElevatedButton = class MdElevatedButton extends ElevatedButton { +}; +MdElevatedButton.styles = [ + styles$P, + styles$Q, + styles$R, +]; +MdElevatedButton = __decorate([ + t$3('md-elevated-button') +], MdElevatedButton); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filled button component. + */ +class FilledButton extends Button { + renderElevationOrOutline() { + return x ``; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/filled-styles.css. +const styles$O = i$4 `:host{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-filled-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-color: var(--md-filled-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_container-shape-start-start: var(--md-filled-button-container-shape-start-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-button-container-shape-start-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-button-container-shape-end-end, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-button-container-shape-end-start, var(--md-filled-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-button-leading-space, 24px);--_trailing-space: var(--md-filled-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-button-with-trailing-icon-trailing-space, 16px)} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ High emphasis – For the primary, most important, or most common + * action on a screen + * + * __Rationale:__ The filled button’s contrasting surface color makes it the + * most prominent button after the FAB. It’s used for final or unblocking + * actions in a flow. + * + * __Example usages:__ + * - Save + * - Confirm + * - Done + * + * @final + * @suppress {visibility} + */ +let MdFilledButton = class MdFilledButton extends FilledButton { +}; +MdFilledButton.styles = [ + styles$P, + styles$Q, + styles$O, +]; +MdFilledButton = __decorate([ + t$3('md-filled-button') +], MdFilledButton); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filled tonal button component. + */ +class FilledTonalButton extends Button { + renderElevationOrOutline() { + return x ``; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/filled-tonal-styles.css. +const styles$N = i$4 `:host{--_container-color: var(--md-filled-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);--_container-height: var(--md-filled-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-filled-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_disabled-container-color: var(--md-filled-tonal-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-tonal-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-tonal-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-tonal-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-tonal-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-container-elevation: var(--md-filled-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-filled-tonal-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-tonal-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-tonal-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-tonal-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-color: var(--md-filled-tonal-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-tonal-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_container-shape-start-start: var(--md-filled-tonal-button-container-shape-start-start, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-button-container-shape-start-end, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-button-container-shape-end-end, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-button-container-shape-end-start, var(--md-filled-tonal-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-filled-tonal-button-leading-space, 24px);--_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-tonal-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-tonal-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-tonal-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-tonal-button-with-trailing-icon-trailing-space, 16px)} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Medium emphasis – For important actions that don’t distract + * from other onscreen elements. + * + * __Rationale:__ Filled tonal buttons have a lighter background color and + * darker label color, making them less visually prominent than a regular, + * filled button. They’re still used for final or unblocking actions in a flow, + * but do so with less emphasis. + * + * __Example usages:__ + * - Save + * - Confirm + * - Done + * + * @final + * @suppress {visibility} + */ +let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton { +}; +MdFilledTonalButton.styles = [ + styles$P, + styles$Q, + styles$N, +]; +MdFilledTonalButton = __decorate([ + t$3('md-filled-tonal-button') +], MdFilledTonalButton); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An outlined button component. + */ +class OutlinedButton extends Button { + renderElevationOrOutline() { + return x `
`; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/outlined-styles.css. +const styles$M = i$4 `:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-outlined-button-container-shape-start-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-button-container-shape-start-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-button-container-shape-end-end, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-button-container-shape-end-start, var(--md-outlined-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0}.outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}:host(:active) .outline{border-color:var(--_pressed-outline-color)}:host([disabled]) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media(forced-colors: active){:host([disabled]) .background{border-color:GrayText}:host([disabled]) .outline{opacity:1}}.outline,md-ripple{border-width:var(--_outline-width)}md-ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Medium emphasis – For important actions that don’t distract + * from other onscreen elements. + * + * __Rationale:__ Use an outlined button for actions that need attention but + * aren’t the primary action, such as “See all” or “Add to cart.” This is also + * the button to use for giving someone the opportunity to change their mind or + * escape a flow. + * + * __Example usages:__ + * - Reply + * - View all + * - Add to cart + * - Take out of trash + * + * @final + * @suppress {visibility} + */ +let MdOutlinedButton = class MdOutlinedButton extends OutlinedButton { +}; +MdOutlinedButton.styles = [styles$P, styles$M]; +MdOutlinedButton = __decorate([ + t$3('md-outlined-button') +], MdOutlinedButton); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A text button component. + */ +class TextButton extends Button { +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./button/internal/text-styles.css. +const styles$L = i$4 `:host{--_container-height: var(--md-text-button-container-height, 40px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-text-button-container-shape-start-start, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-text-button-container-shape-start-end, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-text-button-container-shape-end-end, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-text-button-container-shape-end-start, var(--md-text-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Low emphasis – For optional or supplementary actions with the + * least amount of prominence + * + * __Rationale:__ Text buttons have less visual prominence, so should be used + * for low emphasis actions, such as an alternative option. + * + * __Example usages:__ + * - Learn more + * - View all + * - Change account + * - Turn on + * + * @final + * @suppress {visibility} + */ +let MdTextButton = class MdTextButton extends TextButton { +}; +MdTextButton.styles = [styles$P, styles$L]; +MdTextButton = __decorate([ + t$3('md-text-button') +], MdTextButton); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Re-dispatches an event from the provided element. + * + * This function is useful for forwarding non-composed events, such as `change` + * events. + * + * @example + * class MyInput extends LitElement { + * render() { + * return html``; + * } + * + * protected redispatchEvent(event: Event) { + * redispatchEvent(this, event); + * } + * } + * + * @param element The element to dispatch the event from. + * @param event The event to re-dispatch. + * @return Whether or not the event was dispatched (if cancelable). + */ +function redispatchEvent(element, event) { + // For bubbling events in SSR light DOM (or composed), stop their propagation + // and dispatch the copy. + if (event.bubbles && (!element.shadowRoot || event.composed)) { + event.stopPropagation(); + } + const copy = Reflect.construct(event.constructor, [event.type, event]); + const dispatched = element.dispatchEvent(copy); + if (!dispatched) { + event.preventDefault(); + } + return dispatched; +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A symbol property used to create a constraint validation `Validator`. + * Required for all `mixinConstraintValidation()` elements. + */ +const createValidator = Symbol('createValidator'); +/** + * A symbol property used to return an anchor for constraint validation popups. + * Required for all `mixinConstraintValidation()` elements. + */ +const getValidityAnchor = Symbol('getValidityAnchor'); +// Private symbol members, used to avoid name clashing. +const privateValidator = Symbol('privateValidator'); +const privateSyncValidity = Symbol('privateSyncValidity'); +const privateCustomValidationMessage = Symbol('privateCustomValidationMessage'); +/** + * Mixes in constraint validation APIs for an element. + * + * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation + * for more details. + * + * Implementations must provide a validator to cache and compute its validity, + * along with a shadow root element to anchor validation popups to. + * + * @example + * ```ts + * const baseClass = mixinConstraintValidation( + * mixinFormAssociated(mixinElementInternals(LitElement)) + * ); + * + * class MyCheckbox extends baseClass { + * \@property({type: Boolean}) checked = false; + * \@property({type: Boolean}) required = false; + * + * [createValidator]() { + * return new CheckboxValidator(() => this); + * } + * + * [getValidityAnchor]() { + * return this.renderRoot.querySelector('.root'); + * } + * } + * ``` + * + * @param base The class to mix functionality into. + * @return The provided class with `ConstraintValidation` mixed in. + */ +function mixinConstraintValidation(base) { + var _a; + class ConstraintValidationElement extends base { + constructor() { + super(...arguments); + /** + * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432 + * Replace with this[internals].validity.customError when resolved. + */ + this[_a] = ''; + } + get validity() { + this[privateSyncValidity](); + return this[internals].validity; + } + get validationMessage() { + this[privateSyncValidity](); + return this[internals].validationMessage; + } + get willValidate() { + this[privateSyncValidity](); + return this[internals].willValidate; + } + checkValidity() { + this[privateSyncValidity](); + return this[internals].checkValidity(); + } + reportValidity() { + this[privateSyncValidity](); + return this[internals].reportValidity(); + } + setCustomValidity(error) { + this[privateCustomValidationMessage] = error; + this[privateSyncValidity](); + } + requestUpdate(name, oldValue, options) { + super.requestUpdate(name, oldValue, options); + this[privateSyncValidity](); + } + firstUpdated(changed) { + super.firstUpdated(changed); + // Sync the validity again when the element first renders, since the + // validity anchor is now available. + // + // Elements that `delegatesFocus: true` to an `` will throw an + // error in Chrome and Safari when a form tries to submit or call + // `form.reportValidity()`: + // "An invalid form control with name='' is not focusable" + // + // The validity anchor MUST be provided in `internals.setValidity()` and + // MUST be the `` element rendered. + // + // See https://lit.dev/playground/#gist=6c26e418e0010f7a5aac15005cde8bde + // for a reproduction. + this[privateSyncValidity](); + } + [(_a = privateCustomValidationMessage, privateSyncValidity)]() { + if (!this[privateValidator]) { + this[privateValidator] = this[createValidator](); + } + const { validity, validationMessage: nonCustomValidationMessage } = this[privateValidator].getValidity(); + const customError = !!this[privateCustomValidationMessage]; + const validationMessage = this[privateCustomValidationMessage] || nonCustomValidationMessage; + this[internals].setValidity({ ...validity, customError }, validationMessage, this[getValidityAnchor]() ?? undefined); + } + [createValidator]() { + throw new Error('Implement [createValidator]'); + } + [getValidityAnchor]() { + throw new Error('Implement [getValidityAnchor]'); + } + } + return ConstraintValidationElement; +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A symbol property to retrieve the form value for an element. + */ +const getFormValue = Symbol('getFormValue'); +/** + * A symbol property to retrieve the form state for an element. + */ +const getFormState = Symbol('getFormState'); +/** + * Mixes in form-associated behavior for a class. This allows an element to add + * values to `
` elements. + * + * Implementing classes should provide a `[formValue]` to return the current + * value of the element, as well as reset and restore callbacks. + * + * @example + * ```ts + * const base = mixinFormAssociated(mixinElementInternals(LitElement)); + * + * class MyControl extends base { + * \@property() + * value = ''; + * + * override [getFormValue]() { + * return this.value; + * } + * + * override formResetCallback() { + * const defaultValue = this.getAttribute('value'); + * this.value = defaultValue; + * } + * + * override formStateRestoreCallback(state: string) { + * this.value = state; + * } + * } + * ``` + * + * Elements may optionally provide a `[formState]` if their values do not + * represent the state of the component. + * + * @example + * ```ts + * const base = mixinFormAssociated(mixinElementInternals(LitElement)); + * + * class MyCheckbox extends base { + * \@property() + * value = 'on'; + * + * \@property({type: Boolean}) + * checked = false; + * + * override [getFormValue]() { + * return this.checked ? this.value : null; + * } + * + * override [getFormState]() { + * return String(this.checked); + * } + * + * override formResetCallback() { + * const defaultValue = this.hasAttribute('checked'); + * this.checked = defaultValue; + * } + * + * override formStateRestoreCallback(state: string) { + * this.checked = Boolean(state); + * } + * } + * ``` + * + * IMPORTANT: Requires declares for lit-analyzer + * @example + * ```ts + * const base = mixinFormAssociated(mixinElementInternals(LitElement)); + * class MyControl extends base { + * // Writable mixin properties for lit-html binding, needed for lit-analyzer + * declare disabled: boolean; + * declare name: string; + * } + * ``` + * + * @param base The class to mix functionality into. The base class must use + * `mixinElementInternals()`. + * @return The provided class with `FormAssociated` mixed in. + */ +function mixinFormAssociated(base) { + class FormAssociatedElement extends base { + get form() { + return this[internals].form; + } + get labels() { + return this[internals].labels; + } + // Use @property for the `name` and `disabled` properties to add them to the + // `observedAttributes` array and trigger `attributeChangedCallback()`. + // + // We don't use Lit's default getter/setter (`noAccessor: true`) because + // the attributes need to be updated synchronously to work with synchronous + // form APIs, and Lit updates attributes async by default. + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + // Note: setting name to null or empty does not remove the attribute. + this.setAttribute('name', name); + // We don't need to call `requestUpdate()` since it's called synchronously + // in `attributeChangedCallback()`. + } + get disabled() { + return this.hasAttribute('disabled'); + } + set disabled(disabled) { + this.toggleAttribute('disabled', disabled); + // We don't need to call `requestUpdate()` since it's called synchronously + // in `attributeChangedCallback()`. + } + attributeChangedCallback(name, old, value) { + // Manually `requestUpdate()` for `name` and `disabled` when their + // attribute or property changes. + // The properties update their attributes, so this callback is invoked + // immediately when the properties are set. We call `requestUpdate()` here + // instead of letting Lit set the properties from the attribute change. + // That would cause the properties to re-set the attribute and invoke this + // callback again in a loop. This leads to stale state when Lit tries to + // determine if a property changed or not. + if (name === 'name' || name === 'disabled') { + // Disabled's value is only false if the attribute is missing and null. + const oldValue = name === 'disabled' ? old !== null : old; + // Trigger a lit update when the attribute changes. + this.requestUpdate(name, oldValue); + return; + } + super.attributeChangedCallback(name, old, value); + } + requestUpdate(name, oldValue, options) { + super.requestUpdate(name, oldValue, options); + // If any properties change, update the form value, which may have changed + // as well. + // Update the form value synchronously in `requestUpdate()` rather than + // `update()` or `updated()`, which are async. This is necessary to ensure + // that form data is updated in time for synchronous event listeners. + this[internals].setFormValue(this[getFormValue](), this[getFormState]()); + } + [getFormValue]() { + // Closure does not allow abstract symbol members, so a default + // implementation is needed. + throw new Error('Implement [getFormValue]'); + } + [getFormState]() { + return this[getFormValue](); + } + formDisabledCallback(disabled) { + this.disabled = disabled; + } + } + /** @nocollapse */ + FormAssociatedElement.formAssociated = true; + __decorate([ + n$5({ noAccessor: true }) + ], FormAssociatedElement.prototype, "name", null); + __decorate([ + n$5({ type: Boolean, noAccessor: true }) + ], FormAssociatedElement.prototype, "disabled", null); + return FormAssociatedElement; +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A class that computes and caches `ValidityStateFlags` for a component with + * a given `State` interface. + * + * Cached performance before computing validity is important since constraint + * validation must be checked frequently and synchronously when properties + * change. + * + * @template State The expected interface of properties relevant to constraint + * validation. + */ +class Validator { + /** + * Creates a new validator. + * + * @param getCurrentState A callback that returns the current state of + * constraint validation-related properties. + */ + constructor(getCurrentState) { + this.getCurrentState = getCurrentState; + /** + * The current validity state and message. This is cached and returns if + * constraint validation state does not change. + */ + this.currentValidity = { + validity: {}, + validationMessage: '', + }; + } + /** + * Returns the current `ValidityStateFlags` and validation message for the + * validator. + * + * If the constraint validation state has not changed, this will return a + * cached result. This is important since `getValidity()` can be called + * frequently in response to synchronous property changes. + * + * @return The current validity and validation message. + */ + getValidity() { + const state = this.getCurrentState(); + const hasStateChanged = !this.prevState || !this.equals(this.prevState, state); + if (!hasStateChanged) { + return this.currentValidity; + } + const { validity, validationMessage } = this.computeValidity(state); + this.prevState = this.copy(state); + this.currentValidity = { + validationMessage, + validity: { + // Change any `ValidityState` instances into `ValidityStateFlags` since + // `ValidityState` cannot be easily `{...spread}`. + badInput: validity.badInput, + customError: validity.customError, + patternMismatch: validity.patternMismatch, + rangeOverflow: validity.rangeOverflow, + rangeUnderflow: validity.rangeUnderflow, + stepMismatch: validity.stepMismatch, + tooLong: validity.tooLong, + tooShort: validity.tooShort, + typeMismatch: validity.typeMismatch, + valueMissing: validity.valueMissing, + }, + }; + return this.currentValidity; + } +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A validator that provides constraint validation that emulates + * `` validation. + */ +class CheckboxValidator extends Validator { + computeValidity(state) { + if (!this.checkboxControl) { + // Lazily create the platform input + this.checkboxControl = document.createElement('input'); + this.checkboxControl.type = 'checkbox'; + } + this.checkboxControl.checked = state.checked; + this.checkboxControl.required = state.required; + return { + validity: this.checkboxControl.validity, + validationMessage: this.checkboxControl.validationMessage, + }; + } + equals(prev, next) { + return prev.checked === next.checked && prev.required === next.required; + } + copy({ checked, required }) { + return { checked, required }; + } +} + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Separate variable needed for closure. +const checkboxBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(s$1))); +/** + * A checkbox component. + * + * + * @fires change {Event} The native `change` event on + * [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) + * --bubbles + * @fires input {InputEvent} The native `input` event on + * [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) + * --bubbles --composed + */ +class Checkbox extends checkboxBaseClass { + constructor() { + super(); + /** + * Whether or not the checkbox is selected. + */ + this.checked = false; + /** + * Whether or not the checkbox is indeterminate. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes + */ + this.indeterminate = false; + /** + * When true, require the checkbox to be selected when participating in + * form submission. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation + */ + this.required = false; + /** + * The value of the checkbox that is submitted with a form when selected. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value + */ + this.value = 'on'; + this.prevChecked = false; + this.prevDisabled = false; + this.prevIndeterminate = false; + { + this.addEventListener('click', (event) => { + if (!isActivationClick(event) || !this.input) { + return; + } + this.focus(); + dispatchActivationClick(this.input); + }); + } + } + update(changed) { + if (changed.has('checked') || + changed.has('disabled') || + changed.has('indeterminate')) { + this.prevChecked = changed.get('checked') ?? this.checked; + this.prevDisabled = changed.get('disabled') ?? this.disabled; + this.prevIndeterminate = + changed.get('indeterminate') ?? this.indeterminate; + } + super.update(changed); + } + render() { + const prevNone = !this.prevChecked && !this.prevIndeterminate; + const prevChecked = this.prevChecked && !this.prevIndeterminate; + const prevIndeterminate = this.prevIndeterminate; + const isChecked = this.checked && !this.indeterminate; + const isIndeterminate = this.indeterminate; + const containerClasses = e$1({ + 'disabled': this.disabled, + 'selected': isChecked || isIndeterminate, + 'unselected': !isChecked && !isIndeterminate, + 'checked': isChecked, + 'indeterminate': isIndeterminate, + 'prev-unselected': prevNone, + 'prev-checked': prevChecked, + 'prev-indeterminate': prevIndeterminate, + 'prev-disabled': this.prevDisabled, + }); + // Needed for closure conformance + const { ariaLabel, ariaInvalid } = this; + // Note: needs to be rendered before the for + // form.reportValidity() to work in Chrome. + return x ` +
+ + +
+
+ + + +
+ `; + } + handleInput(event) { + const target = event.target; + this.checked = target.checked; + this.indeterminate = target.indeterminate; + // 'input' event bubbles and is composed, don't re-dispatch it. + } + handleChange(event) { + // 'change' event is not composed, re-dispatch it. + redispatchEvent(this, event); + } + [getFormValue]() { + if (!this.checked || this.indeterminate) { + return null; + } + return this.value; + } + [getFormState]() { + return String(this.checked); + } + formResetCallback() { + // The checked property does not reflect, so the original attribute set by + // the user is used to determine the default value. + this.checked = this.hasAttribute('checked'); + } + formStateRestoreCallback(state) { + this.checked = state === 'true'; + } + [createValidator]() { + return new CheckboxValidator(() => this); + } + [getValidityAnchor]() { + return this.input; + } +} +(() => { + requestUpdateOnAriaChange(Checkbox); +})(); +/** @nocollapse */ +Checkbox.shadowRootOptions = { + ...s$1.shadowRootOptions, + delegatesFocus: true, +}; +__decorate([ + n$5({ type: Boolean }) +], Checkbox.prototype, "checked", void 0); +__decorate([ + n$5({ type: Boolean }) +], Checkbox.prototype, "indeterminate", void 0); +__decorate([ + n$5({ type: Boolean }) +], Checkbox.prototype, "required", void 0); +__decorate([ + n$5() +], Checkbox.prototype, "value", void 0); +__decorate([ + r$4() +], Checkbox.prototype, "prevChecked", void 0); +__decorate([ + r$4() +], Checkbox.prototype, "prevDisabled", void 0); +__decorate([ + r$4() +], Checkbox.prototype, "prevIndeterminate", void 0); +__decorate([ + e$5('input') +], Checkbox.prototype, "input", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./checkbox/internal/checkbox-styles.css. +const styles$K = i$4 `:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}} +`; + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Checkboxes allow users to select one or more items from a set. + * Checkboxes can turn an option on or off. + * + * @description + * Use checkboxes to: + * - Select one or more options from a list + * - Present a list containing sub-selections + * - Turn an item on or off in a desktop environment + * + * @final + * @suppress {visibility} + */ +let MdCheckbox = class MdCheckbox extends Checkbox { +}; +MdCheckbox.styles = [styles$K]; +MdCheckbox = __decorate([ + t$3('md-checkbox') +], MdCheckbox); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A chip component. + * + * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles + */ +class Chip extends s$1 { + constructor() { + super(...arguments); + /** + * Whether or not the chip is disabled. + * + * Disabled chips are not focusable, unless `always-focusable` is set. + */ + this.disabled = false; + /** + * When true, allow disabled chips to be focused with arrow keys. + * + * Add this when a chip needs increased visibility when disabled. See + * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls + * for more guidance on when this is needed. + */ + this.alwaysFocusable = false; + /** + * The label of the chip. + */ + this.label = ''; + /** + * Only needed for SSR. + * + * Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of + * Unstyled Content. + */ + this.hasIcon = false; + } + /** + * Whether or not the primary ripple is disabled (defaults to `disabled`). + * Some chip actions such as links cannot be disabled. + */ + get rippleDisabled() { + return this.disabled; + } + focus(options) { + if (this.disabled && !this.alwaysFocusable) { + return; + } + super.focus(options); + } + render() { + return x ` +
+ ${this.renderContainerContent()} +
+ `; + } + updated(changed) { + if (changed.has('disabled') && changed.get('disabled') !== undefined) { + this.dispatchEvent(new Event('update-focus', { bubbles: true })); + } + } + getContainerClasses() { + return { + 'disabled': this.disabled, + 'has-icon': this.hasIcon, + }; + } + renderContainerContent() { + return x ` + ${this.renderOutline()} + + + ${this.renderPrimaryAction(this.renderPrimaryContent())} + `; + } + renderOutline() { + return x ``; + } + renderLeadingIcon() { + return x ``; + } + renderPrimaryContent() { + return x ` + + ${this.label} + + `; + } + handleIconChange(event) { + const slot = event.target; + this.hasIcon = slot.assignedElements({ flatten: true }).length > 0; + } +} +(() => { + requestUpdateOnAriaChange(Chip); +})(); +/** @nocollapse */ +Chip.shadowRootOptions = { + ...s$1.shadowRootOptions, + delegatesFocus: true, +}; +__decorate([ + n$5({ type: Boolean, reflect: true }) +], Chip.prototype, "disabled", void 0); +__decorate([ + n$5({ type: Boolean, attribute: 'always-focusable' }) +], Chip.prototype, "alwaysFocusable", void 0); +__decorate([ + n$5() +], Chip.prototype, "label", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true, attribute: 'has-icon' }) +], Chip.prototype, "hasIcon", void 0); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An assist chip component. + */ +class AssistChip extends Chip { + constructor() { + super(...arguments); + this.elevated = false; + this.href = ''; + this.target = ''; + } + get primaryId() { + return this.href ? 'link' : 'button'; + } + get rippleDisabled() { + // Link chips cannot be disabled + return !this.href && this.disabled; + } + getContainerClasses() { + return { + ...super.getContainerClasses(), + // Link chips cannot be disabled + disabled: !this.href && this.disabled, + elevated: this.elevated, + link: !!this.href, + }; + } + renderPrimaryAction(content) { + const { ariaLabel } = this; + if (this.href) { + return x ` + ${content} + `; + } + return x ` + + `; + } + renderOutline() { + if (this.elevated) { + return x ``; + } + return super.renderOutline(); + } +} +__decorate([ + n$5({ type: Boolean }) +], AssistChip.prototype, "elevated", void 0); +__decorate([ + n$5() +], AssistChip.prototype, "href", void 0); +__decorate([ + n$5() +], AssistChip.prototype, "target", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/assist-styles.css. +const styles$J = i$4 `:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-assist-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-assist-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-assist-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-assist-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-assist-chip-leading-space, 16px);--_trailing-space: var(--md-assist-chip-trailing-space, 16px);--_icon-label-space: var(--md-assist-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-assist-chip-with-leading-icon-leading-space, 8px)}@media(forced-colors: active){.link .outline{border-color:ActiveText}} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/elevated-styles.css. +const styles$I = i$4 `.elevated{--md-elevation-level: var(--_elevated-container-elevation);--md-elevation-shadow-color: var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level: var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level: var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level: var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level: var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}@media(forced-colors: active){.elevated md-elevation{border:1px solid CanvasText}.elevated.disabled md-elevation{border-color:GrayText}} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/shared-styles.css. +const styles$H = i$4 `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([disabled]){pointer-events:none}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space)}.has-icon .primary.action{padding-inline-start:var(--_with-leading-icon-leading-space)}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}.leading.icon ::slotted(*),.leading.icon svg{margin-inline-end:var(--_icon-label-space)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}a,button{text-transform:inherit}a,button:not(:disabled){cursor:inherit} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/243982145): add docs + * + * @final + * @suppress {visibility} + */ +let MdAssistChip = class MdAssistChip extends AssistChip { +}; +MdAssistChip.styles = [styles$H, styles$I, styles$J]; +MdAssistChip = __decorate([ + t$3('md-assist-chip') +], MdAssistChip); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A chip set component. + */ +class ChipSet extends s$1 { + get chips() { + return this.childElements.filter((child) => child instanceof Chip); + } + constructor() { + super(); + this.internals = + // Cast needed for closure + this.attachInternals(); + { + this.addEventListener('focusin', this.updateTabIndices.bind(this)); + this.addEventListener('update-focus', this.updateTabIndices.bind(this)); + this.addEventListener('keydown', this.handleKeyDown.bind(this)); + this.internals.role = 'toolbar'; + } + } + render() { + return x ``; + } + handleKeyDown(event) { + const isLeft = event.key === 'ArrowLeft'; + const isRight = event.key === 'ArrowRight'; + const isHome = event.key === 'Home'; + const isEnd = event.key === 'End'; + // Ignore non-navigation keys + if (!isLeft && !isRight && !isHome && !isEnd) { + return; + } + const { chips } = this; + // Don't try to select another chip if there aren't any. + if (chips.length < 2) { + return; + } + // Prevent default interactions, such as scrolling. + event.preventDefault(); + if (isHome || isEnd) { + const index = isHome ? 0 : chips.length - 1; + chips[index].focus({ trailing: isEnd }); + this.updateTabIndices(); + return; + } + // Check if moving forwards or backwards + const isRtl = getComputedStyle(this).direction === 'rtl'; + const forwards = isRtl ? isLeft : isRight; + const focusedChip = chips.find((chip) => chip.matches(':focus-within')); + if (!focusedChip) { + // If there is not already a chip focused, select the first or last chip + // based on the direction we're traveling. + const nextChip = forwards ? chips[0] : chips[chips.length - 1]; + nextChip.focus({ trailing: !forwards }); + this.updateTabIndices(); + return; + } + const currentIndex = chips.indexOf(focusedChip); + let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1; + // Search for the next sibling that is not disabled to select. + // If we return to the host index, there is nothing to select. + while (nextIndex !== currentIndex) { + if (nextIndex >= chips.length) { + // Return to start if moving past the last item. + nextIndex = 0; + } + else if (nextIndex < 0) { + // Go to end if moving before the first item. + nextIndex = chips.length - 1; + } + // Check if the next sibling is disabled. If so, + // move the index and continue searching. + // + // Some toolbar items may be focusable when disabled for increased + // visibility. + const nextChip = chips[nextIndex]; + if (nextChip.disabled && !nextChip.alwaysFocusable) { + if (forwards) { + nextIndex++; + } + else { + nextIndex--; + } + continue; + } + nextChip.focus({ trailing: !forwards }); + this.updateTabIndices(); + break; + } + } + updateTabIndices() { + // The chip that should be focusable is either the chip that currently has + // focus or the first chip that can be focused. + const { chips } = this; + let chipToFocus; + for (const chip of chips) { + const isChipFocusable = chip.alwaysFocusable || !chip.disabled; + const chipIsFocused = chip.matches(':focus-within'); + if (chipIsFocused && isChipFocusable) { + // Found the first chip that is actively focused. This overrides the + // first focusable chip found. + chipToFocus = chip; + continue; + } + if (isChipFocusable && !chipToFocus) { + chipToFocus = chip; + } + // Disable non-focused chips. If we disable all of them, we'll grant focus + // to the first focusable child that was found. + chip.tabIndex = -1; + } + if (chipToFocus) { + chipToFocus.tabIndex = 0; + } + } +} +__decorate([ + o$4() +], ChipSet.prototype, "childElements", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/chip-set-styles.css. +const styles$G = i$4 `:host{display:flex;flex-wrap:wrap;gap:8px} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/243982145): add docs + * + * @final + * @suppress {visibility} + */ +let MdChipSet = class MdChipSet extends ChipSet { +}; +MdChipSet.styles = [styles$G]; +MdChipSet = __decorate([ + t$3('md-chip-set') +], MdChipSet); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const ARIA_LABEL_REMOVE = 'aria-label-remove'; +/** + * A chip component with multiple actions. + */ +class MultiActionChip extends Chip { + get ariaLabelRemove() { + if (this.hasAttribute(ARIA_LABEL_REMOVE)) { + return this.getAttribute(ARIA_LABEL_REMOVE); + } + const { ariaLabel } = this; + return `Remove ${ariaLabel || this.label}`; + } + set ariaLabelRemove(ariaLabel) { + const prev = this.ariaLabelRemove; + if (ariaLabel === prev) { + return; + } + if (ariaLabel === null) { + this.removeAttribute(ARIA_LABEL_REMOVE); + } + else { + this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel); + } + this.requestUpdate(); + } + constructor() { + super(); + this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this); + { + this.addEventListener('keydown', this.handleKeyDown.bind(this)); + } + } + focus(options) { + const isFocusable = this.alwaysFocusable || !this.disabled; + if (isFocusable && options?.trailing && this.trailingAction) { + this.trailingAction.focus(options); + return; + } + super.focus(options); + } + renderContainerContent() { + return x ` + ${super.renderContainerContent()} + ${this.renderTrailingAction(this.handleTrailingActionFocus)} + `; + } + handleKeyDown(event) { + const isLeft = event.key === 'ArrowLeft'; + const isRight = event.key === 'ArrowRight'; + // Ignore non-navigation keys. + if (!isLeft && !isRight) { + return; + } + if (!this.primaryAction || !this.trailingAction) { + // Does not have multiple actions. + return; + } + // Check if moving forwards or backwards + const isRtl = getComputedStyle(this).direction === 'rtl'; + const forwards = isRtl ? isLeft : isRight; + const isPrimaryFocused = this.primaryAction?.matches(':focus-within'); + const isTrailingFocused = this.trailingAction?.matches(':focus-within'); + if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) { + // Moving outside of the chip, it will be handled by the chip set. + return; + } + // Prevent default interactions, such as scrolling. + event.preventDefault(); + // Don't let the chip set handle this navigation event. + event.stopPropagation(); + const actionToFocus = forwards ? this.trailingAction : this.primaryAction; + actionToFocus.focus(); + } + handleTrailingActionFocus() { + const { primaryAction, trailingAction } = this; + if (!primaryAction || !trailingAction) { + return; + } + // Temporarily turn off the primary action's focusability. This allows + // shift+tab from the trailing action to move to the previous chip rather + // than the primary action in the same chip. + primaryAction.tabIndex = -1; + trailingAction.addEventListener('focusout', () => { + primaryAction.tabIndex = 0; + }, { once: true }); + } +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** @protected */ +function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable = false, }) { + return x ` + + `; +} +function handleRemoveClick(event) { + if (this.disabled) { + return; + } + event.stopPropagation(); + const preventDefault = !this.dispatchEvent(new Event('remove', { cancelable: true })); + if (preventDefault) { + return; + } + this.remove(); +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filter chip component. + * + * @fires remove {Event} Dispatched when the remove button is clicked. + */ +class FilterChip extends MultiActionChip { + constructor() { + super(...arguments); + this.elevated = false; + this.removable = false; + this.selected = false; + /** + * Only needed for SSR. + * + * Add this attribute when a filter chip has a `slot="selected-icon"` to avoid + * a Flash Of Unstyled Content. + */ + this.hasSelectedIcon = false; + } + get primaryId() { + return 'button'; + } + getContainerClasses() { + return { + ...super.getContainerClasses(), + elevated: this.elevated, + selected: this.selected, + 'has-trailing': this.removable, + 'has-icon': this.hasIcon || this.selected, + }; + } + renderPrimaryAction(content) { + const { ariaLabel } = this; + return x ` + + `; + } + renderLeadingIcon() { + if (!this.selected) { + return super.renderLeadingIcon(); + } + return x ` + + + + `; + } + renderTrailingAction(focusListener) { + if (this.removable) { + return renderRemoveButton({ + focusListener, + ariaLabel: this.ariaLabelRemove, + disabled: this.disabled, + }); + } + return T; + } + renderOutline() { + if (this.elevated) { + return x ``; + } + return super.renderOutline(); + } + handleClick(event) { + if (this.disabled) { + return; + } + // Store prevValue to revert in case `chip.selected` is changed during an + // event listener. + const prevValue = this.selected; + this.selected = !this.selected; + const preventDefault = !redispatchEvent(this, event); + if (preventDefault) { + // We should not do `this.selected = !this.selected`, since a client + // click listener could change its value. Instead, always revert to the + // original value. + this.selected = prevValue; + return; + } + } +} +__decorate([ + n$5({ type: Boolean }) +], FilterChip.prototype, "elevated", void 0); +__decorate([ + n$5({ type: Boolean }) +], FilterChip.prototype, "removable", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true }) +], FilterChip.prototype, "selected", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true, attribute: 'has-selected-icon' }) +], FilterChip.prototype, "hasSelectedIcon", void 0); +__decorate([ + e$5('.primary.action') +], FilterChip.prototype, "primaryAction", void 0); +__decorate([ + e$5('.trailing.action') +], FilterChip.prototype, "trailingAction", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/filter-styles.css. +const styles$F = i$4 `:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-font: var(--md-filter-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filter-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filter-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filter-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-filter-chip-leading-space, 16px);--_trailing-space: var(--md-filter-chip-trailing-space, 16px);--_icon-label-space: var(--md-filter-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-filter-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-filter-chip-with-trailing-icon-trailing-space, 8px)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.checkmark{height:var(--_icon-size);width:var(--_icon-size)}.disabled .checkmark{opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){.disabled .checkmark{opacity:1}} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/selectable-styles.css. +const styles$E = i$4 `.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}:where(.selected)::before{background:var(--_selected-container-color)}:where(.selected) .outline{border-width:var(--_selected-outline-width)}:where(.selected.disabled)::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}:where(.selected) .label{color:var(--_selected-label-text-color)}:where(.selected:hover) .label{color:var(--_selected-hover-label-text-color)}:where(.selected:focus) .label{color:var(--_selected-focus-label-text-color)}:where(.selected:active) .label{color:var(--_selected-pressed-label-text-color)}:where(.selected) .leading.icon{color:var(--_selected-leading-icon-color)}:where(.selected:hover) .leading.icon{color:var(--_selected-hover-leading-icon-color)}:where(.selected:focus) .leading.icon{color:var(--_selected-focus-leading-icon-color)}:where(.selected:active) .leading.icon{color:var(--_selected-pressed-leading-icon-color)}@media(forced-colors: active){:where(.selected:not(.elevated))::before{border:1px solid CanvasText}:where(.selected) .outline{border-width:1px}} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/trailing-icon-styles.css. +const styles$D = i$4 `.trailing.action{align-items:center;justify-content:center;padding-inline-start:var(--_icon-label-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.trailing.action :is(md-ripple,md-focus-ring){border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.trailing.action md-focus-ring{inset:unset}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:where(:hover) .trailing.icon{color:var(--_hover-trailing-icon-color)}:where(:focus) .trailing.icon{color:var(--_focus-trailing-icon-color)}:where(:active) .trailing.icon{color:var(--_pressed-trailing-icon-color)}:where(.disabled) .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}:where(.selected) .trailing.icon{color:var(--_selected-trailing-icon-color)}:where(.selected:hover) .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}:where(.selected:focus) .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}:where(.selected:active) .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}@media(forced-colors: active){.trailing.icon{color:ButtonText}:where(.disabled) .trailing.icon{color:GrayText;opacity:1}} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/243982145): add docs + * + * @final + * @suppress {visibility} + */ +let MdFilterChip = class MdFilterChip extends FilterChip { +}; +MdFilterChip.styles = [ + styles$H, + styles$I, + styles$D, + styles$E, + styles$F, +]; +MdFilterChip = __decorate([ + t$3('md-filter-chip') +], MdFilterChip); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An input chip component. + * + * @fires remove {Event} Dispatched when the remove button is clicked. + */ +class InputChip extends MultiActionChip { + constructor() { + super(...arguments); + this.avatar = false; + this.href = ''; + this.target = ''; + this.removeOnly = false; + this.selected = false; + } + get primaryId() { + if (this.href) { + return 'link'; + } + if (this.removeOnly) { + return ''; + } + return 'button'; + } + get rippleDisabled() { + // Link chips cannot be disabled + return !this.href && this.disabled; + } + get primaryAction() { + // Don't use @query() since a remove-only input chip still has a span that + // has "primary action" classes. + if (this.removeOnly) { + return null; + } + return this.renderRoot.querySelector('.primary.action'); + } + getContainerClasses() { + return { + ...super.getContainerClasses(), + avatar: this.avatar, + // Link chips cannot be disabled + disabled: !this.href && this.disabled, + link: !!this.href, + selected: this.selected, + 'has-trailing': true, + }; + } + renderPrimaryAction(content) { + const { ariaLabel } = this; + if (this.href) { + return x ` + ${content} + `; + } + if (this.removeOnly) { + return x ` + + ${content} + + `; + } + return x ` + + `; + } + renderTrailingAction(focusListener) { + return renderRemoveButton({ + focusListener, + ariaLabel: this.ariaLabelRemove, + disabled: !this.href && this.disabled, + tabbable: this.removeOnly, + }); + } +} +__decorate([ + n$5({ type: Boolean }) +], InputChip.prototype, "avatar", void 0); +__decorate([ + n$5() +], InputChip.prototype, "href", void 0); +__decorate([ + n$5() +], InputChip.prototype, "target", void 0); +__decorate([ + n$5({ type: Boolean, attribute: 'remove-only' }) +], InputChip.prototype, "removeOnly", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true }) +], InputChip.prototype, "selected", void 0); +__decorate([ + e$5('.trailing.action') +], InputChip.prototype, "trailingAction", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/input-styles.css. +const styles$C = i$4 `:host{--_container-height: var(--md-input-chip-container-height, 32px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 9999px));--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-input-chip-leading-space, 16px);--_trailing-space: var(--md-input-chip-trailing-space, 16px);--_icon-label-space: var(--md-input-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-input-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-input-chip-with-trailing-icon-trailing-space, 8px)}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/243982145): add docs + * + * @final + * @suppress {visibility} + */ +let MdInputChip = class MdInputChip extends InputChip { +}; +MdInputChip.styles = [ + styles$H, + styles$D, + styles$E, + styles$C, +]; +MdInputChip = __decorate([ + t$3('md-input-chip') +], MdInputChip); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A suggestion chip component. + */ +class SuggestionChip extends AssistChip { +} +// Note: assist and suggestion chips are functionally identical with different +// tokens. + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./chips/internal/suggestion-styles.css. +const styles$B = i$4 `:host{--_container-height: var(--md-suggestion-chip-container-height, 32px);--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-suggestion-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-suggestion-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-suggestion-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-suggestion-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-suggestion-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-suggestion-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-suggestion-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-suggestion-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-suggestion-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-suggestion-chip-icon-size, 18px);--_container-shape-start-start: var(--md-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-suggestion-chip-leading-space, 16px);--_trailing-space: var(--md-suggestion-chip-trailing-space, 16px);--_icon-label-space: var(--md-suggestion-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-suggestion-chip-with-leading-icon-leading-space, 8px)}@media(forced-colors: active){.link .outline{border-color:ActiveText}} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/243982145): add docs + * + * @final + * @suppress {visibility} + */ +let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip { +}; +MdSuggestionChip.styles = [styles$H, styles$I, styles$B]; +MdSuggestionChip = __decorate([ + t$3('md-suggestion-chip') +], MdSuggestionChip); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A divider component. + */ +class Divider extends s$1 { + constructor() { + super(...arguments); + /** + * Indents the divider with equal padding on both sides. + */ + this.inset = false; + /** + * Indents the divider with padding on the leading side. + */ + this.insetStart = false; + /** + * Indents the divider with padding on the trailing side. + */ + this.insetEnd = false; + } +} +__decorate([ + n$5({ type: Boolean, reflect: true }) +], Divider.prototype, "inset", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true, attribute: 'inset-start' }) +], Divider.prototype, "insetStart", void 0); +__decorate([ + n$5({ type: Boolean, reflect: true, attribute: 'inset-end' }) +], Divider.prototype, "insetEnd", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./divider/internal/divider-styles.css. +const styles$A = i$4 `:host{box-sizing:border-box;color:var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));display:flex;height:var(--md-divider-thickness, 1px);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary A divider is a thin line that groups content in lists and + * containers. + * + * @description Dividers can reinforce tapability, such as when used to separate + * list items or define tappable regions in an accordion. + * + * @final + * @suppress {visibility} + */ +let MdDivider = class MdDivider extends Divider { +}; +MdDivider.styles = [styles$A]; +MdDivider = __decorate([ + t$3('md-divider') +], MdDivider); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * The default dialog open animation. + */ +const DIALOG_DEFAULT_OPEN_ANIMATION = { + dialog: [ + [ + // Dialog slide down + [{ 'transform': 'translateY(-50px)' }, { 'transform': 'translateY(0)' }], + { duration: 500, easing: EASING.EMPHASIZED }, + ], + ], + scrim: [ + [ + // Scrim fade in + [{ 'opacity': 0 }, { 'opacity': 0.6 }], + { duration: 145, easing: 'linear' }, + ], + ], + container: [ + [ + // Container fade in + [{ 'opacity': 0 }, { 'opacity': 1 }], + { duration: 50, easing: 'linear', pseudoElement: '::before' }, + ], + [ + // Container grow + // Note: current spec says to grow from 0dp->100% and shrink from + // 100%->35%. We change this to 35%->100% to simplify the animation that + // is supposed to clip content as it grows. From 0dp it's possible to see + // text/actions appear before the container has fully grown. + [{ 'height': '35%' }, { 'height': '100%' }], + { duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before' }, + ], + ], + headline: [ + [ + // Headline fade in + [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }], + { duration: 250, easing: 'linear', fill: 'forwards' }, + ], + ], + content: [ + [ + // Content fade in + [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }], + { duration: 250, easing: 'linear', fill: 'forwards' }, + ], + ], + actions: [ + [ + // Actions fade in + [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.5 }, { 'opacity': 1 }], + { duration: 300, easing: 'linear', fill: 'forwards' }, + ], + ], +}; +/** + * The default dialog close animation. + */ +const DIALOG_DEFAULT_CLOSE_ANIMATION = { + dialog: [ + [ + // Dialog slide up + [{ 'transform': 'translateY(0)' }, { 'transform': 'translateY(-50px)' }], + { duration: 150, easing: EASING.EMPHASIZED_ACCELERATE }, + ], + ], + scrim: [ + [ + // Scrim fade out + [{ 'opacity': 0.6 }, { 'opacity': 0 }], + { duration: 150, easing: 'linear' }, + ], + ], + container: [ + [ + // Container shrink + [{ 'height': '100%' }, { 'height': '35%' }], + { + duration: 150, + easing: EASING.EMPHASIZED_ACCELERATE, + pseudoElement: '::before', + }, + ], + [ + // Container fade out + [{ 'opacity': '1' }, { 'opacity': '0' }], + { delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' }, + ], + ], + headline: [ + [ + // Headline fade out + [{ 'opacity': 1 }, { 'opacity': 0 }], + { duration: 100, easing: 'linear', fill: 'forwards' }, + ], + ], + content: [ + [ + // Content fade out + [{ 'opacity': 1 }, { 'opacity': 0 }], + { duration: 100, easing: 'linear', fill: 'forwards' }, + ], + ], + actions: [ + [ + // Actions fade out + [{ 'opacity': 1 }, { 'opacity': 0 }], + { duration: 100, easing: 'linear', fill: 'forwards' }, + ], + ], +}; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A dialog component. + * + * @fires open {Event} Dispatched when the dialog is opening before any animations. + * @fires opened {Event} Dispatched when the dialog has opened after any animations. + * @fires close {Event} Dispatched when the dialog is closing before any animations. + * @fires closed {Event} Dispatched when the dialog has closed after any animations. + * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking + * on the scrim or pressing Escape. + */ +class Dialog extends s$1 { + /** + * Opens the dialog when set to `true` and closes it when set to `false`. + */ + get open() { + return this.isOpen; + } + set open(open) { + if (open === this.isOpen) { + return; + } + this.isOpen = open; + if (open) { + this.setAttribute('open', ''); + this.show(); + } + else { + this.removeAttribute('open'); + this.close(); + } + } + constructor() { + super(); + /** + * Gets or sets the dialog's return value, usually to indicate which button + * a user pressed to close it. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue + */ + this.returnValue = ''; + /** + * Gets the opening animation for a dialog. Set to a new function to customize + * the animation. + */ + this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION; + /** + * Gets the closing animation for a dialog. Set to a new function to customize + * the animation. + */ + this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION; + this.isOpen = false; + this.isOpening = false; + this.isConnectedPromise = this.getIsConnectedPromise(); + this.isAtScrollTop = false; + this.isAtScrollBottom = false; + this.nextClickIsFromContent = false; + // Dialogs should not be SSR'd while open, so we can just use runtime checks. + this.hasHeadline = false; + this.hasActions = false; + this.hasIcon = false; + // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224 + // Chrome v120 has a bug where escape keys do not trigger cancels. If we get + // a dialog "close" event that is triggered without a "cancel" after an escape + // keydown, then we need to manually trigger our closing logic. + // + // This bug occurs when pressing escape to close a dialog without first + // interacting with the dialog's content. + // + // Cleanup tracking: + // https://github.com/material-components/material-web/issues/5330 + // This can be removed when full CloseWatcher support added and the above bug + // in Chromium is fixed to fire 'cancel' with one escape press and close with + // multiple. + this.escapePressedWithoutCancel = false; + { + this.addEventListener('submit', this.handleSubmit); + // We do not use `delegatesFocus: true` due to a Chromium bug with + // selecting text. + // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357 + // + // Material requires using focus trapping within the dialog (see + // b/314840853 for the bug to add it). This would normally mean we don't + // care about delegating focus since the `` never receives it. + // However, we still need to handle situations when a user has not + // provided an focusable child in the content. When that happens, the + // `` itself is focused. + // + // Listen to focus/blur instead of focusin/focusout since those can bubble + // from content. + this.addEventListener('focus', () => { + this.dialog?.focus(); + }); + this.addEventListener('blur', () => { + this.dialog?.blur(); + }); + } + } + /** + * Opens the dialog and fires a cancelable `open` event. After a dialog's + * animation, an `opened` event is fired. + * + * Add an `autocomplete` attribute to a child of the dialog that should + * receive focus after opening. + * + * @return A Promise that resolves after the animation is finished and the + * `opened` event was fired. + */ + async show() { + this.isOpening = true; + // Dialogs can be opened before being attached to the DOM, so we need to + // wait until we're connected before calling `showModal()`. + await this.isConnectedPromise; + await this.updateComplete; + const dialog = this.dialog; + // Check if already opened or if `dialog.close()` was called while awaiting. + if (dialog.open || !this.isOpening) { + this.isOpening = false; + return; + } + const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true })); + if (preventOpen) { + this.open = false; + return; + } + // All Material dialogs are modal. + dialog.showModal(); + this.open = true; + // Reset scroll position if re-opening a dialog with the same content. + if (this.scroller) { + this.scroller.scrollTop = 0; + } + // Native modal dialogs ignore autofocus and instead force focus to the + // first focusable child. Override this behavior if there is a child with + // an autofocus attribute. + this.querySelector('[autofocus]')?.focus(); + await this.animateDialog(this.getOpenAnimation()); + this.dispatchEvent(new Event('opened')); + this.isOpening = false; + } + /** + * Closes the dialog and fires a cancelable `close` event. After a dialog's + * animation, a `closed` event is fired. + * + * @param returnValue A return value usually indicating which button was used + * to close a dialog. If a dialog is canceled by clicking the scrim or + * pressing Escape, it will not change the return value after closing. + * @return A Promise that resolves after the animation is finished and the + * `closed` event was fired. + */ + async close(returnValue = this.returnValue) { + this.isOpening = false; + if (!this.isConnected) { + // Disconnected dialogs do not fire close events or animate. + this.open = false; + return; + } + await this.updateComplete; + const dialog = this.dialog; + // Check if already closed or if `dialog.show()` was called while awaiting. + if (!dialog.open || this.isOpening) { + this.open = false; + return; + } + const prevReturnValue = this.returnValue; + this.returnValue = returnValue; + const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true })); + if (preventClose) { + this.returnValue = prevReturnValue; + return; + } + await this.animateDialog(this.getCloseAnimation()); + dialog.close(returnValue); + this.open = false; + this.dispatchEvent(new Event('closed')); + } + connectedCallback() { + super.connectedCallback(); + this.isConnectedPromiseResolve(); + } + disconnectedCallback() { + super.disconnectedCallback(); + this.isConnectedPromise = this.getIsConnectedPromise(); + } + render() { + const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom); + const classes = { + 'has-headline': this.hasHeadline, + 'has-actions': this.hasActions, + 'has-icon': this.hasIcon, + 'scrollable': scrollable, + 'show-top-divider': scrollable && !this.isAtScrollTop, + 'show-bottom-divider': scrollable && !this.isAtScrollBottom, + }; + const { ariaLabel } = this; + return x ` +
+ +
+
+ +

+ +

+ +
+
+
+
+ +
+
+
+
+ + +
+
+ + `; + } + firstUpdated() { + this.intersectionObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + this.handleAnchorIntersection(entry); + } + }, { root: this.scroller }); + this.intersectionObserver.observe(this.topAnchor); + this.intersectionObserver.observe(this.bottomAnchor); + } + handleDialogClick() { + if (this.nextClickIsFromContent) { + // Avoid doing a layout calculation below if we know the click came from + // content. + this.nextClickIsFromContent = false; + return; + } + // Click originated on the backdrop. Native ``s will not cancel, + // but Material dialogs do. + const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true })); + if (preventDefault) { + return; + } + this.close(); + } + handleContentClick() { + this.nextClickIsFromContent = true; + } + handleSubmit(event) { + const form = event.target; + const { submitter } = event; + if (form.method !== 'dialog' || !submitter) { + return; + } + // Close reason is the submitter's value attribute, or the dialog's + // `returnValue` if there is no attribute. + this.close(submitter.getAttribute('value') ?? this.returnValue); + } + handleCancel(event) { + if (event.target !== this.dialog) { + // Ignore any cancel events dispatched by content. + return; + } + this.escapePressedWithoutCancel = false; + const preventDefault = !redispatchEvent(this, event); + // We always prevent default on the original dialog event since we'll + // animate closing it before it actually closes. + event.preventDefault(); + if (preventDefault) { + return; + } + this.close(); + } + handleClose() { + if (!this.escapePressedWithoutCancel) { + return; + } + this.escapePressedWithoutCancel = false; + this.dialog?.dispatchEvent(new Event('cancel', { cancelable: true })); + } + handleKeydown(event) { + if (event.key !== 'Escape') { + return; + } + // An escape key was pressed. If a "close" event fires next without a + // "cancel" event first, then we know we're in the Chrome v120 bug. + this.escapePressedWithoutCancel = true; + // Wait a full task for the cancel/close event listeners to fire, then + // reset the flag. + setTimeout(() => { + this.escapePressedWithoutCancel = false; + }); + } + async animateDialog(animation) { + const { dialog, scrim, container, headline, content, actions } = this; + if (!dialog || !scrim || !container || !headline || !content || !actions) { + return; + } + const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation; + const elementAndAnimation = [ + [dialog, dialogAnimate ?? []], + [scrim, scrimAnimate ?? []], + [container, containerAnimate ?? []], + [headline, headlineAnimate ?? []], + [content, contentAnimate ?? []], + [actions, actionsAnimate ?? []], + ]; + const animations = []; + for (const [element, animation] of elementAndAnimation) { + for (const animateArgs of animation) { + animations.push(element.animate(...animateArgs)); + } + } + await Promise.all(animations.map((animation) => animation.finished)); + } + handleHeadlineChange(event) { + const slot = event.target; + this.hasHeadline = slot.assignedElements().length > 0; + } + handleActionsChange(event) { + const slot = event.target; + this.hasActions = slot.assignedElements().length > 0; + } + handleIconChange(event) { + const slot = event.target; + this.hasIcon = slot.assignedElements().length > 0; + } + handleAnchorIntersection(entry) { + const { target, isIntersecting } = entry; + if (target === this.topAnchor) { + this.isAtScrollTop = isIntersecting; + } + if (target === this.bottomAnchor) { + this.isAtScrollBottom = isIntersecting; + } + } + getIsConnectedPromise() { + return new Promise((resolve) => { + this.isConnectedPromiseResolve = resolve; + }); + } +} +(() => { + requestUpdateOnAriaChange(Dialog); +})(); +__decorate([ + n$5({ type: Boolean }) +], Dialog.prototype, "open", null); +__decorate([ + n$5({ attribute: false }) +], Dialog.prototype, "returnValue", void 0); +__decorate([ + n$5() +], Dialog.prototype, "type", void 0); +__decorate([ + e$5('dialog') +], Dialog.prototype, "dialog", void 0); +__decorate([ + e$5('.scrim') +], Dialog.prototype, "scrim", void 0); +__decorate([ + e$5('.container') +], Dialog.prototype, "container", void 0); +__decorate([ + e$5('.headline') +], Dialog.prototype, "headline", void 0); +__decorate([ + e$5('.content') +], Dialog.prototype, "content", void 0); +__decorate([ + e$5('.actions') +], Dialog.prototype, "actions", void 0); +__decorate([ + r$4() +], Dialog.prototype, "isAtScrollTop", void 0); +__decorate([ + r$4() +], Dialog.prototype, "isAtScrollBottom", void 0); +__decorate([ + e$5('.scroller') +], Dialog.prototype, "scroller", void 0); +__decorate([ + e$5('.top.anchor') +], Dialog.prototype, "topAnchor", void 0); +__decorate([ + e$5('.bottom.anchor') +], Dialog.prototype, "bottomAnchor", void 0); +__decorate([ + r$4() +], Dialog.prototype, "hasHeadline", void 0); +__decorate([ + r$4() +], Dialog.prototype, "hasActions", void 0); +__decorate([ + r$4() +], Dialog.prototype, "hasIcon", void 0); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$z = i$4 `:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:0.6;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */ +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Dialogs can require an action, communicate information, or help + * users accomplish a task. There are two types of dialogs: basic and + * full-screen. + * + * @description + * A dialog is a modal window that appears in front of app content to provide + * critical information or ask for a decision. Dialogs disable all app + * functionality when they appear, and remain on screen until confirmed, + * dismissed, or a required action has been taken. + * + * Dialogs are purposefully interruptive, so they should be used sparingly. + * A less disruptive alternative is to use a menu, which provides options + * without interrupting a user’s experience. + * + * On mobile devices only, complex dialogs should be displayed fullscreen. + * + * __Example usages:__ + * - Common use cases for basic dialogs include alerts, quick selection, and + * confirmation. + * - More complex dialogs may contain actions that require a series of tasks + * to complete. One example is creating a calendar entry with the event title, + * date, location, and time. + * + * @final + * @suppress {visibility} + */ +let MdDialog = class MdDialog extends Dialog { +}; +MdDialog.styles = [styles$z]; +MdDialog = __decorate([ + t$3('md-dialog') +], MdDialog); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// tslint:disable-next-line:enforce-comments-on-exported-symbols +class SharedFab extends s$1 { + constructor() { + super(...arguments); + /** + * The size of the FAB. + * + * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not + * have different sizes. + */ + this.size = 'medium'; + /** + * The text to display on the FAB. + */ + this.label = ''; + /** + * Lowers the FAB's elevation. + */ + this.lowered = false; + } + render() { + // Needed for closure conformance + const { ariaLabel } = this; + return x ` + + `; + } + getRenderClasses() { + const isExtended = !!this.label; + return { + 'lowered': this.lowered, + 'small': this.size === 'small' && !isExtended, + 'large': this.size === 'large' && !isExtended, + 'extended': isExtended, + }; + } + renderTouchTarget() { + return x `
`; + } + renderLabel() { + return this.label ? x `${this.label}` : ''; + } + renderIcon() { + const { ariaLabel } = this; + return x ` + + + + `; + } +} +(() => { + requestUpdateOnAriaChange(SharedFab); +})(); +/** @nocollapse */ +SharedFab.shadowRootOptions = { + mode: 'open', + delegatesFocus: true, +}; +__decorate([ + n$5({ reflect: true }) +], SharedFab.prototype, "size", void 0); +__decorate([ + n$5() +], SharedFab.prototype, "label", void 0); +__decorate([ + n$5({ type: Boolean }) +], SharedFab.prototype, "lowered", void 0); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// tslint:disable-next-line:enforce-comments-on-exported-symbols +class Fab extends SharedFab { + constructor() { + super(...arguments); + /** + * The FAB color variant to render. + */ + this.variant = 'surface'; + } + getRenderClasses() { + return { + ...super.getRenderClasses(), + 'primary': this.variant === 'primary', + 'secondary': this.variant === 'secondary', + 'tertiary': this.variant === 'tertiary', + }; + } +} +__decorate([ + n$5() +], Fab.prototype, "variant", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./fab/internal/fab-branded-styles.css. +const styles$y = i$4 `:host{--_container-color: var(--md-fab-branded-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-branded-container-elevation, 3);--_container-height: var(--md-fab-branded-container-height, 56px);--_container-shadow-color: var(--md-fab-branded-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-width: var(--md-fab-branded-container-width, 56px);--_focus-container-elevation: var(--md-fab-branded-focus-container-elevation, 3);--_hover-container-elevation: var(--md-fab-branded-hover-container-elevation, 4);--_hover-state-layer-color: var(--md-fab-branded-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-branded-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-fab-branded-icon-size, 36px);--_lowered-container-color: var(--md-fab-branded-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-branded-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-branded-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-branded-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-branded-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-branded-pressed-container-elevation, 3);--_pressed-state-layer-color: var(--md-fab-branded-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-branded-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-branded-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-branded-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-branded-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-fab-branded-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-size: var(--md-fab-branded-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-line-height: var(--md-fab-branded-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-weight: var(--md-fab-branded-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-branded-large-container-height, 96px);--_large-container-width: var(--md-fab-branded-large-container-width, 96px);--_large-icon-size: var(--md-fab-branded-large-icon-size, 48px);--_pressed-label-text-color: var(--md-fab-branded-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-fab-branded-container-shape-start-start, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-start-end: var(--md-fab-branded-container-shape-start-end, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-end: var(--md-fab-branded-container-shape-end-end, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-start: var(--md-fab-branded-container-shape-end-start, var(--md-fab-branded-container-shape, var(--md-sys-shape-corner-large, 16px)));--_large-container-shape-start-start: var(--md-fab-branded-large-container-shape-start-start, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-start-end: var(--md-fab-branded-large-container-shape-start-end, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-end: var(--md-fab-branded-large-container-shape-end-end, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-start: var(--md-fab-branded-large-container-shape-end-start, var(--md-fab-branded-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)))} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./fab/internal/forced-colors-styles.css. +const styles$x = i$4 `@media(forced-colors: active){.fab{border:1px solid ButtonText}.fab.extended{padding-inline-start:15px;padding-inline-end:19px}md-focus-ring{--md-focus-ring-outward-offset: 3px}} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./fab/internal/shared-styles.css. +const styles$w = i$4 `:host{--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([size=medium][touch-target=wrapper]){margin:max(0px,48px - var(--_container-height))}:host([size=large][touch-target=wrapper]){margin:max(0px,48px - var(--_large-container-height))}.fab,.icon,.icon ::slotted(*){display:flex}.fab{align-items:center;justify-content:center;vertical-align:middle;padding:0;position:relative;height:var(--_container-height);transition-property:background-color;border-width:0px;outline:none;z-index:0;text-transform:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);background-color:var(--_container-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color)}.fab.extended{width:inherit;box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px}.fab:not(.extended){width:var(--_container-width)}.fab.large{width:var(--_large-container-width);height:var(--_large-container-height)}.fab.large .icon ::slotted(*){width:var(--_large-icon-size);height:var(--_large-icon-size);font-size:var(--_large-icon-size)}.fab.large,.fab.large .ripple{border-start-start-radius:var(--_large-container-shape-start-start);border-start-end-radius:var(--_large-container-shape-start-end);border-end-start-radius:var(--_large-container-shape-end-start);border-end-end-radius:var(--_large-container-shape-end-end)}.fab.large md-focus-ring{--md-focus-ring-shape-start-start: var(--_large-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_large-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_large-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_large-container-shape-end-start)}.fab:focus{--md-elevation-level: var(--_focus-container-elevation)}.fab:hover{--md-elevation-level: var(--_hover-container-elevation)}.fab:active{--md-elevation-level: var(--_pressed-container-elevation)}.fab.lowered{background-color:var(--_lowered-container-color);--md-elevation-level: var(--_lowered-container-elevation)}.fab.lowered:focus{--md-elevation-level: var(--_lowered-focus-container-elevation)}.fab.lowered:hover{--md-elevation-level: var(--_lowered-hover-container-elevation)}.fab.lowered:active{--md-elevation-level: var(--_lowered-pressed-container-elevation)}.fab .label{color:var(--_label-text-color)}.fab:hover .fab .label{color:var(--_hover-label-text-color)}.fab:focus .fab .label{color:var(--_focus-label-text-color)}.fab:active .fab .label{color:var(--_pressed-label-text-color)}.label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}.fab.extended .icon ::slotted(*){margin-inline-end:12px}.ripple{overflow:hidden}.ripple,md-elevation{z-index:-1}.touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}:host([touch-target=none]) .touch-target{display:none}md-elevation,.fab{transition-duration:280ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}.fab,.ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.icon ::slotted(*){width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)} +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Floating action buttons (FABs) help people take primary actions. + * They’re used to represent the most important action on a screen, such as + * Create or Reply. + * + * @description + * __Emphasis:__ High emphasis – For the primary, most important, or most common + * action on a screen + * + * __Rationale:__ The FAB remains the default component for a screen’s primary + * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended + * FAB’s wider format and text label give it more visual prominence than a FAB. + * It’s often used on larger screens where a FAB would seem too small. Branded + * FABs are used to specifically call attention to branded logo icons. + * + * __Example usages:__ + * - FAB + * - Create + * - Compose + * - Extended FAB + * - Create + * - Compose + * - New Thread + * - New File + * + * @final + * @suppress {visibility} + */ +let MdBrandedFab = class MdBrandedFab extends Fab { + getRenderClasses() { + return { + ...super.getRenderClasses(), + 'primary': false, + 'secondary': false, + 'tertiary': false, + 'small': false, + }; + } +}; +MdBrandedFab.styles = [styles$w, styles$y, styles$x]; +MdBrandedFab = __decorate([ + t$3('md-branded-fab') +], MdBrandedFab); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./fab/internal/fab-styles.css. +const styles$v = i$4 `:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-fab-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var(--md-fab-container-shape-start-start, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-start-end: var(--md-fab-container-shape-start-end, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-end: var(--md-fab-container-shape-end-end, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_container-shape-end-start: var(--md-fab-container-shape-end-start, var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 16px)));--_large-container-shape-start-start: var(--md-fab-large-container-shape-start-start, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-start-end: var(--md-fab-large-container-shape-start-end, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-end: var(--md-fab-large-container-shape-end-end, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_large-container-shape-end-start: var(--md-fab-large-container-shape-end-start, var(--md-fab-large-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));--_small-container-shape-start-start: var(--md-fab-small-container-shape-start-start, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));--_small-container-shape-start-end: var(--md-fab-small-container-shape-start-end, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));--_small-container-shape-end-end: var(--md-fab-small-container-shape-end-end, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));--_small-container-shape-end-start: var(--md-fab-small-container-shape-end-start, var(--md-fab-small-container-shape, var(--md-sys-shape-corner-medium, 12px)));cursor:pointer}:host([size=small][touch-target=wrapper]){margin:max(0px,48px - var(--_small-container-height))}.fab{cursor:inherit}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.extended slot span{padding-inline-start:4px}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)} +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Floating action buttons (FABs) help people take primary actions. + * They’re used to represent the most important action on a screen, such as + * Create or Reply. + * + * @description + * __Emphasis:__ High emphasis – For the primary, most important, or most common + * action on a screen + * + * __Rationale:__ The FAB remains the default component for a screen’s primary + * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended + * FAB’s wider format and text label give it more visual prominence than a FAB. + * It’s often used on larger screens where a FAB would seem too small. + * + * __Example usages:__ + * - FAB + * - Create + * - Compose + * - Extended FAB + * - Create + * - Compose + * - New Thread + * - New File + * + * @final + * @suppress {visibility} + */ +let MdFab = class MdFab extends Fab { +}; +MdFab.styles = [styles$w, styles$v, styles$x]; +MdFab = __decorate([ + t$3('md-fab') +], MdFab); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A field component. + */ +class Field extends s$1 { + constructor() { + super(...arguments); + this.disabled = false; + this.error = false; + this.focused = false; + this.label = ''; + this.populated = false; + this.required = false; + this.resizable = false; + this.supportingText = ''; + this.errorText = ''; + this.count = -1; + this.max = -1; + /** + * Whether or not the field has leading content. + */ + this.hasStart = false; + /** + * Whether or not the field has trailing content. + */ + this.hasEnd = false; + this.isAnimating = false; + /** + * When set to true, the error text's `role="alert"` will be removed, then + * re-added after an animation frame. This will re-announce an error message + * to screen readers. + */ + this.refreshErrorAlert = false; + this.disableTransitions = false; + } + get counterText() { + // Count and max are typed as number, but can be set to null when Lit removes + // their attributes. These getters coerce back to a number for calculations. + const countAsNumber = this.count ?? -1; + const maxAsNumber = this.max ?? -1; + // Counter does not show if count is negative, or max is negative or 0. + if (countAsNumber < 0 || maxAsNumber <= 0) { + return ''; + } + return `${countAsNumber} / ${maxAsNumber}`; + } + get supportingOrErrorText() { + return this.error && this.errorText ? this.errorText : this.supportingText; + } + /** + * Re-announces the field's error supporting text to screen readers. + * + * Error text announces to screen readers anytime it is visible and changes. + * Use the method to re-announce the message when the text has not changed, + * but announcement is still needed (such as for `reportValidity()`). + */ + reannounceError() { + this.refreshErrorAlert = true; + } + update(props) { + // Client-side property updates + const isDisabledChanging = props.has('disabled') && props.get('disabled') !== undefined; + if (isDisabledChanging) { + this.disableTransitions = true; + } + // When disabling, remove focus styles if focused. + if (this.disabled && this.focused) { + props.set('focused', true); + this.focused = false; + } + // Animate if focused or populated change. + this.animateLabelIfNeeded({ + wasFocused: props.get('focused'), + wasPopulated: props.get('populated'), + }); + super.update(props); + } + render() { + const floatingLabel = this.renderLabel(/*isFloating*/ true); + const restingLabel = this.renderLabel(/*isFloating*/ false); + const outline = this.renderOutline?.(floatingLabel); + const classes = { + 'disabled': this.disabled, + 'disable-transitions': this.disableTransitions, + 'error': this.error && !this.disabled, + 'focused': this.focused, + 'with-start': this.hasStart, + 'with-end': this.hasEnd, + 'populated': this.populated, + 'resizable': this.resizable, + 'required': this.required, + 'no-label': !this.label, + }; + return x ` +
+
+ ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline} +
+
+ +
+
+
+ ${restingLabel} ${outline ? T : floatingLabel} +
+
+ +
+
+
+ +
+
+
+ ${this.renderSupportingText()} +
+ `; + } + updated(changed) { + if (changed.has('supportingText') || + changed.has('errorText') || + changed.has('count') || + changed.has('max')) { + this.updateSlottedAriaDescribedBy(); + } + if (this.refreshErrorAlert) { + // The past render cycle removed the role="alert" from the error message. + // Re-add it after an animation frame to re-announce the error. + requestAnimationFrame(() => { + this.refreshErrorAlert = false; + }); + } + if (this.disableTransitions) { + requestAnimationFrame(() => { + this.disableTransitions = false; + }); + } + } + renderSupportingText() { + const { supportingOrErrorText, counterText } = this; + if (!supportingOrErrorText && !counterText) { + return T; + } + // Always render the supporting text span so that our `space-around` + // container puts the counter at the end. + const start = x `${supportingOrErrorText}`; + // Conditionally render counter so we don't render the extra `gap`. + // TODO(b/244473435): add aria-label and announcements + const end = counterText + ? x `${counterText}` + : T; + // Announce if there is an error and error text visible. + // If refreshErrorAlert is true, do not announce. This will remove the + // role="alert" attribute. Another render cycle will happen after an + // animation frame to re-add the role. + const shouldErrorAnnounce = this.error && this.errorText && !this.refreshErrorAlert; + const role = shouldErrorAnnounce ? 'alert' : T; + return x ` +
${start}${end}
+ + `; + } + updateSlottedAriaDescribedBy() { + for (const element of this.slottedAriaDescribedBy) { + j(x `${this.supportingOrErrorText} ${this.counterText}`, element); + element.setAttribute('hidden', ''); + } + } + renderLabel(isFloating) { + if (!this.label) { + return T; + } + let visible; + if (isFloating) { + // Floating label is visible when focused/populated or when animating. + visible = this.focused || this.populated || this.isAnimating; + } + else { + // Resting label is visible when unfocused. It is never visible while + // animating. + visible = !this.focused && !this.populated && !this.isAnimating; + } + const classes = { + 'hidden': !visible, + 'floating': isFloating, + 'resting': !isFloating, + }; + // Add '*' if a label is present and the field is required + const labelText = `${this.label}${this.required ? '*' : ''}`; + return x ` + ${labelText} + `; + } + animateLabelIfNeeded({ wasFocused, wasPopulated, }) { + if (!this.label) { + return; + } + wasFocused ?? (wasFocused = this.focused); + wasPopulated ?? (wasPopulated = this.populated); + const wasFloating = wasFocused || wasPopulated; + const shouldBeFloating = this.focused || this.populated; + if (wasFloating === shouldBeFloating) { + return; + } + this.isAnimating = true; + this.labelAnimation?.cancel(); + // Only one label is visible at a time for clearer text rendering. + // The floating label is visible and used during animation. At the end of + // the animation, it will either remain visible (if floating) or hide and + // the resting label will be shown. + // + // We don't use forward filling because if the dimensions of the text field + // change (leading icon removed, density changes, etc), then the animation + // will be inaccurate. + // + // Re-calculating the animation each time will prevent any visual glitches + // from appearing. + // TODO(b/241113345): use animation tokens + this.labelAnimation = this.floatingLabelEl?.animate(this.getLabelKeyframes(), { duration: 150, easing: EASING.STANDARD }); + this.labelAnimation?.addEventListener('finish', () => { + // At the end of the animation, update the visible label. + this.isAnimating = false; + }); + } + getLabelKeyframes() { + const { floatingLabelEl, restingLabelEl } = this; + if (!floatingLabelEl || !restingLabelEl) { + return []; + } + const { x: floatingX, y: floatingY, height: floatingHeight, } = floatingLabelEl.getBoundingClientRect(); + const { x: restingX, y: restingY, height: restingHeight, } = restingLabelEl.getBoundingClientRect(); + const floatingScrollWidth = floatingLabelEl.scrollWidth; + const restingScrollWidth = restingLabelEl.scrollWidth; + // Scale by width ratio instead of font size since letter-spacing will scale + // incorrectly. Using the width we can better approximate the adjusted + // scale and compensate for tracking and overflow. + // (use scrollWidth instead of width to account for clipped labels) + const scale = restingScrollWidth / floatingScrollWidth; + const xDelta = restingX - floatingX; + // The line-height of the resting and floating label are different. When + // we move the floating label down to the resting label's position, it won't + // exactly match because of this. We need to adjust by half of what the + // final scaled floating label's height will be. + const yDelta = restingY - + floatingY + + Math.round((restingHeight - floatingHeight * scale) / 2); + // Create the two transforms: floating to resting (using the calculations + // above), and resting to floating (re-setting the transform to initial + // values). + const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`; + const floatTransform = `translateX(0) translateY(0) scale(1)`; + // Constrain the floating labels width to a scaled percentage of the + // resting label's width. This will prevent long clipped labels from + // overflowing the container. + const restingClientWidth = restingLabelEl.clientWidth; + const isRestingClipped = restingScrollWidth > restingClientWidth; + const width = isRestingClipped ? `${restingClientWidth / scale}px` : ''; + if (this.focused || this.populated) { + return [ + { transform: restTransform, width }, + { transform: floatTransform, width }, + ]; + } + return [ + { transform: floatTransform, width }, + { transform: restTransform, width }, + ]; + } + getSurfacePositionClientRect() { + return this.containerEl.getBoundingClientRect(); + } +} +__decorate([ + n$5({ type: Boolean }) +], Field.prototype, "disabled", void 0); +__decorate([ + n$5({ type: Boolean }) +], Field.prototype, "error", void 0); +__decorate([ + n$5({ type: Boolean }) +], Field.prototype, "focused", void 0); +__decorate([ + n$5() +], Field.prototype, "label", void 0); +__decorate([ + n$5({ type: Boolean }) +], Field.prototype, "populated", void 0); +__decorate([ + n$5({ type: Boolean }) +], Field.prototype, "required", void 0); +__decorate([ + n$5({ type: Boolean }) +], Field.prototype, "resizable", void 0); +__decorate([ + n$5({ attribute: 'supporting-text' }) +], Field.prototype, "supportingText", void 0); +__decorate([ + n$5({ attribute: 'error-text' }) +], Field.prototype, "errorText", void 0); +__decorate([ + n$5({ type: Number }) +], Field.prototype, "count", void 0); +__decorate([ + n$5({ type: Number }) +], Field.prototype, "max", void 0); +__decorate([ + n$5({ type: Boolean, attribute: 'has-start' }) +], Field.prototype, "hasStart", void 0); +__decorate([ + n$5({ type: Boolean, attribute: 'has-end' }) +], Field.prototype, "hasEnd", void 0); +__decorate([ + o$4({ slot: 'aria-describedby' }) +], Field.prototype, "slottedAriaDescribedBy", void 0); +__decorate([ + r$4() +], Field.prototype, "isAnimating", void 0); +__decorate([ + r$4() +], Field.prototype, "refreshErrorAlert", void 0); +__decorate([ + r$4() +], Field.prototype, "disableTransitions", void 0); +__decorate([ + e$5('.label.floating') +], Field.prototype, "floatingLabelEl", void 0); +__decorate([ + e$5('.label.resting') +], Field.prototype, "restingLabelEl", void 0); +__decorate([ + e$5('.container') +], Field.prototype, "containerEl", void 0); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filled field component. + */ +class FilledField extends Field { + renderBackground() { + return x ` +
+
+ `; + } + renderIndicator() { + return x `
`; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./field/internal/filled-styles.css. +const styles$u = i$4 `@layer styles{:host{--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_bottom-space: var(--md-filled-field-bottom-space, 16px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-filled-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-filled-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-filled-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-weight: var(--md-filled-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-filled-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-filled-field-disabled-leading-content-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-filled-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-filled-field-disabled-trailing-content-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-filled-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-filled-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-filled-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-filled-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-filled-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-filled-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 3px);--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-filled-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-filled-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-content-color: var(--md-filled-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-filled-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-filled-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-filled-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-filled-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-filled-field-leading-space, 16px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-filled-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-filled-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-filled-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-filled-field-top-space, 16px);--_trailing-content-color: var(--md-filled-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-filled-field-trailing-space, 16px);--_with-label-bottom-space: var(--md-filled-field-with-label-bottom-space, 8px);--_with-label-top-space: var(--md-filled-field-with-label-top-space, 8px);--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, var(--md-filled-field-container-shape, var(--md-sys-shape-corner-none, 0px)))}.background,.state-layer{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.background{background:var(--_container-color)}.state-layer{visibility:hidden}.field:not(.disabled):hover .state-layer{visibility:visible}.label.floating{position:absolute;top:var(--_with-label-top-space)}.field:not(.with-start) .label-wrapper{margin-inline-start:var(--_leading-space)}.field:not(.with-end) .label-wrapper{margin-inline-end:var(--_trailing-space)}.active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%;z-index:1}.active-indicator::before,.active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:"";position:absolute;width:100%}.active-indicator::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .active-indicator::after{opacity:1}.field:not(.with-start) .content ::slotted(*){padding-inline-start:var(--_leading-space)}.field:not(.with-end) .content ::slotted(*){padding-inline-end:var(--_trailing-space)}.field:not(.no-label) .content ::slotted(:not(textarea)){padding-bottom:var(--_with-label-bottom-space);padding-top:calc(var(--_with-label-top-space) + var(--_label-text-populated-line-height))}.field:not(.no-label) .content ::slotted(textarea){margin-bottom:var(--_with-label-bottom-space);margin-top:calc(var(--_with-label-top-space) + var(--_label-text-populated-line-height))}:hover .active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}.active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}:hover .state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.disabled .active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.disabled .background{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.error .active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.error:hover .active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.error:hover .state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.error .active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}.resizable .container{bottom:var(--_focus-active-indicator-height);clip-path:inset(var(--_focus-active-indicator-height) 0 0 0)}.resizable .container>*{top:var(--_focus-active-indicator-height)}}@layer hcm{@media(forced-colors: active){.disabled .active-indicator::before{border-color:GrayText;opacity:1}}} +`; + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./field/internal/shared-styles.css. +const styles$t = i$4 `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/228525797): add docs + * @final + * @suppress {visibility} + */ +let MdFilledField = class MdFilledField extends FilledField { +}; +MdFilledField.styles = [styles$t, styles$u]; +MdFilledField = __decorate([ + t$3('md-filled-field') +], MdFilledField); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An outlined field component. + */ +class OutlinedField extends Field { + renderOutline(floatingLabel) { + return x ` +
+
+
+
+
+
${floatingLabel}
+
+
+
+ `; + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./field/internal/outlined-styles.css. +const styles$s = i$4 `@layer styles{:host{--_bottom-space: var(--md-outlined-field-bottom-space, 16px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-outlined-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-outlined-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-outlined-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-weight: var(--md-outlined-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-outlined-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-outlined-field-disabled-leading-content-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-outlined-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-outlined-field-disabled-trailing-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-outlined-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-outlined-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-outlined-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-outlined-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-outlined-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-outlined-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-outlined-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-outlined-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-content-color: var(--md-outlined-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-outlined-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-outlined-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-outlined-field-leading-space, 16px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-outlined-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-outlined-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-outlined-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-outlined-field-top-space, 16px);--_trailing-content-color: var(--md-outlined-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-outlined-field-trailing-space, 16px);--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, var(--md-outlined-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)))}.outline{border-color:var(--_outline-color);border-radius:inherit;display:flex;pointer-events:none;height:100%;position:absolute;width:100%;z-index:1}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:"";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - var(--_leading-space) - var(--_trailing-space));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.2, 0, 0, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-panel-active{opacity:1}.outline-label{display:flex;max-width:100%;transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .content ::slotted(*){padding-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-start) .label-wrapper{margin-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .content ::slotted(*){padding-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.field:not(.with-end) .label-wrapper{margin-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}.resizable .container{bottom:var(--_focus-outline-width);inset-inline-end:var(--_focus-outline-width);clip-path:inset(var(--_focus-outline-width) 0 0 var(--_focus-outline-width))}.resizable .container>*{top:var(--_focus-outline-width);inset-inline-start:var(--_focus-outline-width)}.resizable .container:dir(rtl){clip-path:inset(var(--_focus-outline-width) var(--_focus-outline-width) 0 0)}}@layer hcm{@media(forced-colors: active){.disabled .outline{border-color:GrayText;color:GrayText}.disabled :is(.outline-start,.outline-end,.outline-panel-inactive){opacity:1}}} +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/228525797): add docs + * @final + * @suppress {visibility} + */ +let MdOutlinedField = class MdOutlinedField extends OutlinedField { +}; +MdOutlinedField.styles = [styles$t, styles$s]; +MdOutlinedField = __decorate([ + t$3('md-outlined-field') +], MdOutlinedField); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/265336902): add docs + */ +class Icon extends s$1 { + render() { + return x ``; + } + connectedCallback() { + super.connectedCallback(); + const ariaHidden = this.getAttribute('aria-hidden'); + if (ariaHidden === 'false') { + // Allow the user to set `aria-hidden="false"` to create an icon that is + // announced by screenreaders. + this.removeAttribute('aria-hidden'); + return; + } + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } +} + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./icon/internal/icon-styles.css. +const styles$r = i$4 `:host{font-size:var(--md-icon-size, 24px);width:var(--md-icon-size, 24px);height:var(--md-icon-size, 24px);color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;place-items:center;place-content:center;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;flex-shrink:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%} +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @final + * @suppress {visibility} + */ +let MdIcon = class MdIcon extends Icon { +}; +/** @nocollapse */ +MdIcon.styles = [styles$r]; +MdIcon = __decorate([ + t$3('md-icon') +], MdIcon); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./iconbutton/internal/filled-styles.css. +const styles$q = i$4 `:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:disabled{color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:disabled .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled)::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)} +`; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e=Symbol.for(""),o$1=t=>{if(t?.r===e)return t?._$litStatic$},s=(t,...r)=>({_$litStatic$:r.reduce(((r,e,o)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[o+1]),t[0]),r:e}),a=new Map,l$1=t=>(r,...e)=>{const i=e.length;let s,l;const n=[],u=[];let c,$=0,f=!1;for(;$ + ${this.renderFocusRing()} + ${this.renderRipple()} + ${!this.selected ? this.renderIcon() : T} + ${this.selected ? this.renderSelectedIcon() : T} + ${this.renderTouchTarget()} + ${this.href && this.renderLink()} + `; + } + renderLink() { + // Needed for closure conformance + const { ariaLabel } = this; + return x ` + + `; + } + getRenderClasses() { + return { + 'flip-icon': this.flipIcon, + 'selected': this.toggle && this.selected, + }; + } + renderIcon() { + return x ``; + } + renderSelectedIcon() { + // Use default slot as fallback to not require specifying multiple icons + return x ``; + } + renderTouchTarget() { + return x ``; + } + renderFocusRing() { + // TODO(b/310046938): use the same id for both elements + return x ``; + } + renderRipple() { + // TODO(b/310046938): use the same id for both elements + return x ``; + } + connectedCallback() { + this.flipIcon = isRtl(this, this.flipIconInRtl); + super.connectedCallback(); + } + async handleClick(event) { + // Allow the event to propagate + await 0; + if (!this.toggle || this.disabled || event.defaultPrevented) { + return; + } + this.selected = !this.selected; + this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true })); + // Bubbles but does not compose to mimic native browser & ` validation. + */ +class RadioValidator extends Validator { + computeValidity(states) { + if (!this.radioElement) { + // Lazily create the radio element + this.radioElement = document.createElement('input'); + this.radioElement.type = 'radio'; + // A name is required for validation to run + this.radioElement.name = 'group'; + } + let isRequired = false; + let isChecked = false; + for (const { checked, required } of states) { + if (required) { + isRequired = true; + } + if (checked) { + isChecked = true; + } + } + // Firefox v119 doesn't compute grouped radio validation correctly while + // they are detached from the DOM, which is why we don't render multiple + // virtual s. Instead, we can check the required/checked states and + // grab the i18n'd validation message if the value is missing. + this.radioElement.checked = isChecked; + this.radioElement.required = isRequired; + return { + validity: { + valueMissing: isRequired && !isChecked, + }, + validationMessage: this.radioElement.validationMessage, + }; + } + equals(prevGroup, nextGroup) { + if (prevGroup.length !== nextGroup.length) { + return false; + } + for (let i = 0; i < prevGroup.length; i++) { + const prev = prevGroup[i]; + const next = nextGroup[i]; + if (prev.checked !== next.checked || prev.required !== next.required) { + return false; + } + } + return true; + } + copy(states) { + // Cast as unknown since typescript does not have enough information to + // infer that the array always has at least one element. + return states.map(({ checked, required }) => ({ + checked, + required, + })); + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A `ReactiveController` that provides root node-scoped single selection for + * elements, similar to native `` selection. + * + * To use, elements should add the controller and call + * `selectionController.handleCheckedChange()` in a getter/setter. This must + * be synchronous to match native behavior. + * + * @example + * const CHECKED = Symbol('checked'); + * + * class MyToggle extends LitElement { + * get checked() { return this[CHECKED]; } + * set checked(checked: boolean) { + * const oldValue = this.checked; + * if (oldValue === checked) { + * return; + * } + * + * this[CHECKED] = checked; + * this.selectionController.handleCheckedChange(); + * this.requestUpdate('checked', oldValue); + * } + * + * [CHECKED] = false; + * + * private selectionController = new SingleSelectionController(this); + * + * constructor() { + * super(); + * this.addController(this.selectionController); + * } + * } + */ +class SingleSelectionController { + /** + * All single selection elements in the host element's root with the same + * `name` attribute, including the host element. + */ + get controls() { + const name = this.host.getAttribute('name'); + if (!name || !this.root || !this.host.isConnected) { + return [this.host]; + } + // Cast as unknown since there is not enough information for typescript to + // know that there is always at least one element (the host). + return Array.from(this.root.querySelectorAll(`[name="${name}"]`)); + } + constructor(host) { + this.host = host; + this.focused = false; + this.root = null; + this.handleFocusIn = () => { + this.focused = true; + this.updateTabIndices(); + }; + this.handleFocusOut = () => { + this.focused = false; + this.updateTabIndices(); + }; + /** + * Handles arrow key events from the host. Using the arrow keys will + * select and check the next or previous sibling with the host's + * `name` attribute. + */ + this.handleKeyDown = (event) => { + const isDown = event.key === 'ArrowDown'; + const isUp = event.key === 'ArrowUp'; + const isLeft = event.key === 'ArrowLeft'; + const isRight = event.key === 'ArrowRight'; + // Ignore non-arrow keys + if (!isLeft && !isRight && !isDown && !isUp) { + return; + } + // Don't try to select another sibling if there aren't any. + const siblings = this.controls; + if (!siblings.length) { + return; + } + // Prevent default interactions on the element for arrow keys, + // since this controller will introduce new behavior. + event.preventDefault(); + // Check if moving forwards or backwards + const isRtl = getComputedStyle(this.host).direction === 'rtl'; + const forwards = isRtl ? isLeft || isDown : isRight || isDown; + const hostIndex = siblings.indexOf(this.host); + let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1; + // Search for the next sibling that is not disabled to select. + // If we return to the host index, there is nothing to select. + while (nextIndex !== hostIndex) { + if (nextIndex >= siblings.length) { + // Return to start if moving past the last item. + nextIndex = 0; + } + else if (nextIndex < 0) { + // Go to end if moving before the first item. + nextIndex = siblings.length - 1; + } + // Check if the next sibling is disabled. If so, + // move the index and continue searching. + const nextSibling = siblings[nextIndex]; + if (nextSibling.hasAttribute('disabled')) { + if (forwards) { + nextIndex++; + } + else { + nextIndex--; + } + continue; + } + // Uncheck and remove focusability from other siblings. + for (const sibling of siblings) { + if (sibling !== nextSibling) { + sibling.checked = false; + sibling.tabIndex = -1; + sibling.blur(); + } + } + // The next sibling should be checked, focused and dispatch a change event + nextSibling.checked = true; + nextSibling.tabIndex = 0; + nextSibling.focus(); + // Fire a change event since the change is triggered by a user action. + // This matches native behavior. + nextSibling.dispatchEvent(new Event('change', { bubbles: true })); + break; + } + }; + } + hostConnected() { + this.root = this.host.getRootNode(); + this.host.addEventListener('keydown', this.handleKeyDown); + this.host.addEventListener('focusin', this.handleFocusIn); + this.host.addEventListener('focusout', this.handleFocusOut); + if (this.host.checked) { + // Uncheck other siblings when attached if already checked. This mimics + // native behavior. + this.uncheckSiblings(); + } + // Update for the newly added host. + this.updateTabIndices(); + } + hostDisconnected() { + this.host.removeEventListener('keydown', this.handleKeyDown); + this.host.removeEventListener('focusin', this.handleFocusIn); + this.host.removeEventListener('focusout', this.handleFocusOut); + // Update for siblings that are still connected. + this.updateTabIndices(); + this.root = null; + } + /** + * Should be called whenever the host's `checked` property changes + * synchronously. + */ + handleCheckedChange() { + if (!this.host.checked) { + return; + } + this.uncheckSiblings(); + this.updateTabIndices(); + } + uncheckSiblings() { + for (const sibling of this.controls) { + if (sibling !== this.host) { + sibling.checked = false; + } + } + } + /** + * Updates the `tabindex` of the host and its siblings. + */ + updateTabIndices() { + // There are three tabindex states for a group of elements: + // 1. If any are checked, that element is focusable. + const siblings = this.controls; + const checkedSibling = siblings.find((sibling) => sibling.checked); + // 2. If an element is focused, the others are no longer focusable. + if (checkedSibling || this.focused) { + const focusable = checkedSibling || this.host; + focusable.tabIndex = 0; + for (const sibling of siblings) { + if (sibling !== focusable) { + sibling.tabIndex = -1; + } + } + return; + } + // 3. If none are checked or focused, all are focusable. + for (const sibling of siblings) { + sibling.tabIndex = 0; + } + } +} + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +var _a$2; +const CHECKED = Symbol('checked'); +let maskId = 0; +// Separate variable needed for closure. +const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(s$1)))); +/** + * A radio component. + * + * @fires input {InputEvent} Dispatched when the value changes from user + * interaction. --bubbles + * @fires change {Event} Dispatched when the value changes from user + * interaction. --bubbles --composed + */ +class Radio extends radioBaseClass { + /** + * Whether or not the radio is selected. + */ + get checked() { + return this[CHECKED]; + } + set checked(checked) { + const wasChecked = this.checked; + if (wasChecked === checked) { + return; + } + this[CHECKED] = checked; + this.requestUpdate('checked', wasChecked); + this.selectionController.handleCheckedChange(); + } + constructor() { + super(); + // Unique maskId is required because of a Safari bug that fail to persist + // reference to the mask. This should be removed once the bug is fixed. + this.maskId = `cutout${++maskId}`; + this[_a$2] = false; + /** + * Whether or not the radio is required. If any radio is required in a group, + * all radios are implicitly required. + */ + this.required = false; + /** + * The element value to use in form submission when checked. + */ + this.value = 'on'; + this.selectionController = new SingleSelectionController(this); + this.addController(this.selectionController); + { + this[internals].role = 'radio'; + this.addEventListener('click', this.handleClick.bind(this)); + this.addEventListener('keydown', this.handleKeydown.bind(this)); + } + } + render() { + const classes = { 'checked': this.checked }; + return x ` + + `; + } + updated() { + this[internals].ariaChecked = String(this.checked); + } + async handleClick(event) { + if (this.disabled) { + return; + } + // allow event to propagate to user code after a microtask. + await 0; + if (event.defaultPrevented) { + return; + } + if (isActivationClick(event)) { + this.focus(); + } + // Per spec, clicking on a radio input always selects it. + this.checked = true; + this.dispatchEvent(new Event('change', { bubbles: true })); + this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true })); + } + async handleKeydown(event) { + // allow event to propagate to user code after a microtask. + await 0; + if (event.key !== ' ' || event.defaultPrevented) { + return; + } + this.click(); + } + [(_a$2 = CHECKED, getFormValue)]() { + return this.checked ? this.value : null; + } + [getFormState]() { + return String(this.checked); + } + formResetCallback() { + // The checked property does not reflect, so the original attribute set by + // the user is used to determine the default value. + this.checked = this.hasAttribute('checked'); + } + formStateRestoreCallback(state) { + this.checked = state === 'true'; + } + [createValidator]() { + return new RadioValidator(() => { + if (!this.selectionController) { + // Validation runs on superclass construction, so selection controller + // might not actually be ready until this class constructs. + return [this]; + } + return this.selectionController.controls; + }); + } + [getValidityAnchor]() { + return this.container; + } +} +__decorate([ + n$5({ type: Boolean }) +], Radio.prototype, "checked", null); +__decorate([ + n$5({ type: Boolean }) +], Radio.prototype, "required", void 0); +__decorate([ + n$5() +], Radio.prototype, "value", void 0); +__decorate([ + e$5('.container') +], Radio.prototype, "container", void 0); + +/** + * @license + * Copyright 2024 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +// Generated stylesheet for ./radio/internal/radio-styles.css. +const styles$d = i$4 `@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}input{appearance:none;height:48px;margin:0;position:absolute;width:48px;cursor:inherit}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}} +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Radio buttons allow users to select one option from a set. + * + * @description + * Radio buttons are the recommended way to allow users to make a single + * selection from a list of options. + * + * Only one radio button can be selected at a time. + * + * Use radio buttons to: + * - Select a single option from a set + * - Expose all available options + * + * @final + * @suppress {visibility} + */ +let MdRadio = class MdRadio extends Radio { +}; +MdRadio.styles = [styles$d]; +MdRadio = __decorate([ + t$3('md-radio') +], MdRadio); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A symbol property used for a callback when validity has been reported. + */ +const onReportValidity = Symbol('onReportValidity'); +// Private symbol members, used to avoid name clashing. +const privateCleanupFormListeners = Symbol('privateCleanupFormListeners'); +const privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid'); +const privateIsSelfReportingValidity = Symbol('privateIsSelfReportingValidity'); +const privateCallOnReportValidity = Symbol('privateCallOnReportValidity'); +/** + * Mixes in a callback for constraint validation when validity should be + * styled and reported to the user. + * + * This is commonly used in text-field-like controls that display error styles + * and error messages. + * + * @example + * ```ts + * const baseClass = mixinOnReportValidity( + * mixinConstraintValidation( + * mixinFormAssociated(mixinElementInternals(LitElement)), + * ), + * ); + * + * class MyField extends baseClass { + * \@property({type: Boolean}) error = false; + * \@property() errorMessage = ''; + * + * [onReportValidity](invalidEvent: Event | null) { + * this.error = !!invalidEvent; + * this.errorMessage = this.validationMessage; + * + * // Optionally prevent platform popup from displaying + * invalidEvent?.preventDefault(); + * } + * } + * ``` + * + * @param base The class to mix functionality into. + * @return The provided class with `OnReportValidity` mixed in. + */ +function mixinOnReportValidity(base) { + var _a, _b, _c; + class OnReportValidityElement extends base { + // Mixins must have a constructor with `...args: any[]` + // tslint:disable-next-line:no-any + constructor(...args) { + super(...args); + /** + * Used to clean up event listeners when a new form is associated. + */ + this[_a] = new AbortController(); + /** + * Used to determine if an invalid event should report validity. Invalid + * events from `checkValidity()` do not trigger reporting. + */ + this[_b] = false; + /** + * Used to determine if the control is reporting validity from itself, or + * if a `` is causing the validity report. Forms have different + * control focusing behavior. + */ + this[_c] = false; + this.addEventListener('invalid', (invalidEvent) => { + // Listen for invalid events dispatched by a `` when it tries to + // submit and the element is invalid. We ignore events dispatched when + // calling `checkValidity()` as well as untrusted events, since the + // `reportValidity()` and ``-dispatched events are always + // trusted. + if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) { + return; + } + this.addEventListener('invalid', () => { + // A normal bubbling phase event listener. By adding it here, we + // ensure it's the last event listener that is called during the + // bubbling phase. + this[privateCallOnReportValidity](invalidEvent); + }, { once: true }); + }, { + // Listen during the capture phase, which will happen before the + // bubbling phase. That way, we can add a final event listener that + // will run after other event listeners, and we can check if it was + // default prevented. This works because invalid does not bubble. + capture: true, + }); + } + checkValidity() { + this[privateDoNotReportInvalid] = true; + const valid = super.checkValidity(); + this[privateDoNotReportInvalid] = false; + return valid; + } + reportValidity() { + this[privateIsSelfReportingValidity] = true; + const valid = super.reportValidity(); + // Constructor's invalid listener will handle reporting invalid events. + if (valid) { + this[privateCallOnReportValidity](null); + } + this[privateIsSelfReportingValidity] = false; + return valid; + } + [(_a = privateCleanupFormListeners, _b = privateDoNotReportInvalid, _c = privateIsSelfReportingValidity, privateCallOnReportValidity)](invalidEvent) { + // Since invalid events do not bubble to parent listeners, and because + // our invalid listeners are added lazily after other listeners, we can + // reliably read `defaultPrevented` synchronously without worrying + // about waiting for another listener that could cancel it. + const wasCanceled = invalidEvent?.defaultPrevented; + if (wasCanceled) { + return; + } + this[onReportValidity](invalidEvent); + // If an implementation calls invalidEvent.preventDefault() to stop the + // platform popup from displaying, focusing is also prevented, so we need + // to manually focus. + const implementationCanceledFocus = !wasCanceled && invalidEvent?.defaultPrevented; + if (!implementationCanceledFocus) { + return; + } + // The control should be focused when: + // - `control.reportValidity()` is called (self-reporting). + // - a form is reporting validity for its controls and this is the first + // invalid control. + if (this[privateIsSelfReportingValidity] || + isFirstInvalidControlInForm(this[internals].form, this)) { + this.focus(); + } + } + [onReportValidity](invalidEvent) { + throw new Error('Implement [onReportValidity]'); + } + formAssociatedCallback(form) { + // can't use super.formAssociatedCallback?.() due to closure + if (super.formAssociatedCallback) { + super.formAssociatedCallback(form); + } + // Clean up previous form listeners. + this[privateCleanupFormListeners].abort(); + if (!form) { + return; + } + this[privateCleanupFormListeners] = new AbortController(); + // Add a listener that fires when the form runs constraint validation and + // the control is valid, so that it may remove its error styles. + // + // This happens on `form.reportValidity()` and `form.requestSubmit()` + // (both when the submit fails and passes). + addFormReportValidListener(this, form, () => { + this[privateCallOnReportValidity](null); + }, this[privateCleanupFormListeners].signal); + } + } + return OnReportValidityElement; +} +/** + * Add a listener that fires when a form runs constraint validation on a control + * and it is valid. This is needed to clear previously invalid styles. + * + * @param control The control of the form to listen for valid events. + * @param form The control's form that can run constraint validation. + * @param onControlValid A listener that is called when the form runs constraint + * validation and the control is valid. + * @param cleanup A cleanup signal to remove the listener. + */ +function addFormReportValidListener(control, form, onControlValid, cleanup) { + const validateHooks = getFormValidateHooks(form); + // When a form validates its controls, check if an invalid event is dispatched + // on the control. If it is not, then inform the control to report its valid + // state. + let controlFiredInvalid = false; + let cleanupInvalidListener; + let isNextSubmitFromHook = false; + validateHooks.addEventListener('before', () => { + isNextSubmitFromHook = true; + cleanupInvalidListener = new AbortController(); + controlFiredInvalid = false; + control.addEventListener('invalid', () => { + controlFiredInvalid = true; + }, { + signal: cleanupInvalidListener.signal, + }); + }, { signal: cleanup }); + validateHooks.addEventListener('after', () => { + isNextSubmitFromHook = false; + cleanupInvalidListener?.abort(); + if (controlFiredInvalid) { + return; + } + onControlValid(); + }, { signal: cleanup }); + // The above hooks handle imperatively submitting the form, but not + // declaratively submitting the form. This happens when: + // 1. A non-custom element ` +

Your Heading

+ + + + + */ + + /* header- normal + +
+ + +

Your Heading

+
+ */ + + /* activity-full -- +
+
+ +
+
+ + */ + + + + + /* 3dot- menu-- + + + + --main-- + + + */ + + + + /* dialog-regular ---- + +
+
+

Modal Heading

+ Supporting text +
+ + +
+
+
+ + --change id no. use more dialogs--- + + dialog toggle + + + + + ---Button-filled + + + + + */ + + + + + + /* bottom-nav-tabs --- + +
+
+
+ + + + + */ + + + + /* snackbar Usages ---- + + NORMAL ONE -- + + ShowSnack('Hi this is a Snack', 5000, 5); + + Action one --- + + showSnackbarAction({ + text: 'Snackbar Text', + actionText: 'Action', + bottomPosition:'5', + manualDismiss: false, + timeout: 5000 , + onActionClick: function(element) { + alert('Custom Action Clicked!'); + } + +}); + + + + */ + + + + /* input-fields --- + + OUTLINED -- + + + + + FILLED -- + + + + + + + */ + + + + /* radio ---- + + + + */ + + + /* full-activity-larger use ----- +
+
+ +

Small Header

+
+
+

Big Header

+
+ + +
+
+
+ + */ \ No newline at end of file diff --git a/app/src/main/assets/components/md-buttons.css b/app/src/main/assets/components/md-buttons.css new file mode 100644 index 000000000..188829b03 --- /dev/null +++ b/app/src/main/assets/components/md-buttons.css @@ -0,0 +1,303 @@ +button-filled { + color: var(--On-Primary); + background-color: var(--Primary); + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + + + button-outlined { + color: var(--Primary); + background-color: transparent; + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + border: 1px solid var(--Outline); + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + button-tonal { + color: var(--On-Secondary-Container); + background-color: var(--Secondary-Container); + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + text-button { + color: var(--Primary); + background-color: transparent; + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + + /* disabled-form */ + + button-filled[disabled], + button-tonal[disabled] { + opacity: 0.12; + background-color: var(--On-Surface); + color: var(--Surface); + pointer-events: none; + + } + + + button-outlined[disabled] { + opacity: 0.32; + border-color: var(--On-Surface); + color: var(--On-Surface); + pointer-events: none; + + } + + + + + /* Fab */ + + fab { + width: 56px; + height: 56px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Material icons outlined'; + background-color: var(--Primary-Container); + color: var(--On-Primary-Container); + font-size: 30px; + border-radius: 18px; + } + + + fab-small { + width: 40px; + height: 40px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Material icons outlined'; + background-color: var(--Primary-Container); + color: var(--On-Primary-Container); + font-size: 24px; + border-radius: 16px; + } + + fab-large { + width: 76px; + height: 76px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Material icons outlined'; + background-color: var(--Primary-Container); + color: var(--On-Primary-Container); + font-size: 34px; + border-radius: 24px; + } + + /* icon-btn */ + + button-filled-i { + color: var(--On-Primary); + background-color: var(--Primary); + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + button-filled-i i, + button-outlined-i i, + button-tonal-i i, + text-button-i i { + font-family: 'Material icons outlined'; + margin-right: 8px; + font-style: normal !important; + font-size: 22px; + } + + button-outlined-i { + color: var(--Primary); + background-color: transparent; + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + border: 1px solid var(--Outline); + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + + button-tonal-i { + color: var(--On-Secondary-Container); + background-color: var(--Secondary-Container); + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + + text-button-i { + color: var(--Primary); + background-color: transparent; + height: 45px; + align-items: center; + justify-content: center; + font-size: 18px; + width: max-content; + border-radius: 50px; + display: flex; + font-family: var(--google-normal); + min-width: 40px; + padding-left: 20px; + padding-right: 20px; + + } + + + + + + /* buttons-usage */ + + + + /* filled-- + + Filled Button + + + --FILLED With ICON-- + + addAdd task + + + */ + + + /* Outlined --- + + Outlined Button + + --OUTLINED With ICON-- + addAdd task + + + */ + + + + + /* Tonal --- + + Tonal Button + + + --TONAL With ICON-- + addAdd task + + + + */ + + + /* Text Btn --- + + Text Button + + + + --TextBtn With ICON-- + addText Button + + + + + */ + + + + /* fab Btn --- + + edit + + --fab-small-- + + check + + --fab-large + + add + + + */ + + + \ No newline at end of file diff --git a/app/src/main/assets/components/modal-ver.css b/app/src/main/assets/components/modal-ver.css new file mode 100644 index 000000000..f7f599604 --- /dev/null +++ b/app/src/main/assets/components/modal-ver.css @@ -0,0 +1,270 @@ +/* settings-template */ + + + +.title{ + color: var(--Primary); + font-family: 'Google'; + margin: 0; + margin-top: 20px; + font-weight: 900; + margin-left: 10px; + padding-bottom: 5px; + +} + +.text_content_options{ + display: flex; + flex-direction: column; + margin-left: 40px; + +} + +.text_content_options p{ + margin: 0; + color: var(--On-Surface) ; + font-family: 'Google'; + font-size: 18px; +} + +.text_content_options span{ + margin: 0; + font-size: 14.5px; + color: var(--Outline) ; + margin-top: 3px !important; + max-width: 200px; + font-family: var(--google-normal); +} + +.settings_options{ + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 0px; + padding: 10px; + position: relative; + margin-bottom: 10px; + padding-right: 15px; +} + +.settings_options.radio{ + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 0px; + padding: 10px; + position: relative; + margin-bottom: 10px; + padding-right: 15px; + padding-bottom: 55px; + position: relative !important; +} + + +.icon-options{ + position: absolute; + left: 10px; + font-size: 23px; + font-style: normal; + color: var(--On-Surface) ; +} + +/* about-app-template */ + +.about-div{ + padding: 10px; + align-items: center; + color: var(--On-Surface); +} + +.about-div li{ + margin-bottom: 10px; + font-family: var(--google-normal); + font-size: 18px; + line-height: 1.5; +} + +.version-area{ +background-color: rgba(255, 0, 0, 0); +padding-bottom: 1px; +padding-top: 1px; +font-weight: 700; +} + +.made-by{ +text-align: right; +margin-right: 20px; +font-family: var(--google-normal); +font-size: 20px; +color: var(--Primary); + +} + + + + +.title-about{ +color: var(--Primary); +font-family: 'Google'; +margin: 0; +margin-top: 20px; +font-weight: 500; +font-size: 20px; +padding-left: 10px; +padding-bottom: 5px; +display: flex; +align-items: center; +border-bottom: 1px solid var(--Outline); +} + +.title-about span{ +font-weight: normal; +margin-right: 10px; +} + + +/* license */ + +.licenses-div{ +border: 1.5px solid var(--Outline-Variant); +margin: 10px; +padding: 10px; +border-radius: 10px; +} + +.licenses-div .name-main{ +margin: 0; +margin-top: 10px !important; +margin-bottom: 10px; +font-weight: 300; +font-family: var(--outfit); +color: var(--On-Surface); + + +} + +.licenses-div .name-label{ +font-size: 16px; +font-family: var(--outfit); +color: var(--On-Surface); + +} + +.licenses-div .main-license{ +line-height: 1.5; +font-size: 14px; +font-family: var(--outfit); +color: var(--On-Surface-Variant); + +} + +.licenses-div .license-label{ +align-items: center; +justify-content: flex-end; +color: var(--Primary); +opacity: 0.7; +display: flex; +font-weight: 600; +font-family: var(--outfit); + +width: 100%; +} + + + + + + + + + +/* settings-template_usage ---- + + switch-option + +
+ dark_mode +
+

Dark theme

+ Enables the dark theme for the app +
+ +
+ + + + ---LABEL--- + +

General

+ + + + ---OPENS-Other-Screen ---- + + +
+ verified +
+

Third party licenses

+ Used in the app +
+ chevron_right +
+ + + + ---SHOW-version +
+ info +
+

+ Lollipop (6-14) +
+
+ + */ + + + + /* about-temp + +
+
  • The app is mainly coded in Java, JavaScript, C++.
    • +
  • The UI of this app is created using GDK, Material You, and Material 3 components, which are open source and + developed by @Google.
    • +
    + + + + ---LABle--- + + +

    infoLanguage used

    + + + */ + + + + /* license + + +
    +

    Open Sans

    + Steve Matteson + +

    Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of + Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, + Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a + neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent + legibility characteristics in its letterforms.

    + + Open Font License +
    + + */ \ No newline at end of file diff --git a/app/src/main/assets/components/segment-btns.css b/app/src/main/assets/components/segment-btns.css new file mode 100644 index 000000000..038fdce38 --- /dev/null +++ b/app/src/main/assets/components/segment-btns.css @@ -0,0 +1,413 @@ +.radio-div-set{ + display: flex; + align-items: center; + } + + .radio-div-set div input{ + display: none; + } + + .radio-div-set div label{ + color: var(--On-Surface); + background-color: rgba(0, 0, 255, 0); + border: 1.4px solid var(--Outline); + + + display: flex; + height: 38px; + font-family: var(--google-mid); + font-size: 16px; + position: relative; + justify-content: center; + + align-items: center; + width: max-content; + padding-left: 20px; + padding-right: 20px; + transition: background-color 0.1s, padding 0.2s; + } + + .radio-div-set div:first-child > label{ + border-bottom-left-radius: 50px; + border-top-left-radius: 50px; + width: max-content; + display: flex; + align-items: center; + justify-content: center; + border-right: 1px solid var(--Outline) !important; + + } + + .radio-div-set div:last-child label{ + border-bottom-right-radius: 50px; + border-top-right-radius: 50px; + width: max-content; + display: flex; + align-items: center; + justify-content: center; + border-left: 1px solid var(--Outline); + + } + + .radio-div-set div:last-child input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + padding-left: 40px; + padding-right: 20px !important; + } + + .radio-div-set div:first-child input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + padding-left: 40px; + padding-right: 10px !important; + + + } + + + .radio-div-set div input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + padding-left: 35px; + padding-right: 10px !important; + + } + + + .radio-div-set div:first-child input:checked + label::before { + content: 'done'; + position: absolute; + font-family: 'Material symbols' !important; + left: 13px; + color: var(--On-Surface); + font-size: 24px; + + } + + .radio-div-set div:last-child input:checked + label::before { + content: 'done'; + position: absolute; + font-family: 'Material symbols' !important; + left: 10px; + color: var(--On-Surface); + font-size: 24px; + + } + + .radio-div-set div input:checked + label::before { + content: 'done'; + position: absolute; + font-family: 'Material symbols' !important; + left: 7px; + color: var(--On-Surface); + font-size: 24px; + + } + + + + /* icon-one */ + + + .radio-div-set-icon{ + display: flex; + align-items: center; + } + + .radio-div-set-icon div input{ + display: none; + } + + .radio-div-set-icon div label{ + color: var(--On-Surface); + background-color: rgba(0, 0, 255, 0); + border: 1.4px solid var(--Outline); + + cursor: pointer; + + display: flex; + height: 38px; + font-family: var(--google-mid); + font-size: 15px; + position: relative; + justify-content: space-around; + gap: 5px; + align-items: center; + width: max-content; + padding-left: 10px; + padding-right: 10px; + transition: background-color 0.1s, padding 0.2s; + } + + .radio-div-set-icon div:first-child > label{ + border-bottom-left-radius: 50px; + /* padding-left: 45px; */ + + border-top-left-radius: 50px; + width: max-content; + display: flex; + align-items: center; + justify-content: center; + border-right: 1px solid var(--Outline) !important; + + } + + .radio-div-set-icon div:last-child label{ + border-bottom-right-radius: 50px; + border-top-right-radius: 50px; + width: max-content; + display: flex; + /* padding-left: 40px; */ + + align-items: center; + justify-content: center; + border-left: 1px solid var(--Outline); + + } + + .radio-div-set-icon div:last-child input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + + } + + .radio-div-set-icon div:first-child input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + + + + } + + + .radio-div-set-icon div input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + + + } + + .radio-div-set-icon div label::before { + content: attr(data-icon); + /* position: absolute; */ + font-family: 'Material symbols' !important; + left: 15px; + color: var(--On-Surface); + font-size: 20px; + + } + + + .radio-div-set-icon div:last-child label::before { + content: attr(data-icon); + /* position: absolute; */ + font-family: 'Material symbols' !important; + color: var(--On-Surface); + font-size: 20px; + + } + + + .radio-div-set-icon div:first-child label::before { + content: attr(data-icon); + /* position: absolute; */ + font-family: 'Material symbols' !important; + color: var(--On-Surface); + font-size: 20px; + + } + + + .radio-div-set-icon div:first-child input:checked + label::before { + content: 'done'; + /* position: absolute; */ + font-family: 'Material symbols' !important; + color: var(--On-Secondary-Container); + font-size: 22px; + width: 20px; + height: 24px; + + } + + .radio-div-set-icon div:last-child input:checked + label::before { + content: 'done'; + /* position: absolute; */ + font-family: 'Material symbols' !important; + color: var(--On-Secondary-Container); + font-size: 22px; + width: 20px; + height: 24px; + } + + .radio-div-set-icon div input:checked + label::before { + content: 'done'; + /* position: absolute; */ + font-family: 'Material symbols' !important; + color: var(--On-Secondary-Container); + font-size: 22px; + width: 20px; + height: 24px; + } + + + /* regular */ + + + .radio-div-set-regular{ + display: flex; + align-items: center; + } + + .radio-div-set-regular div input{ + display: none; + } + + .radio-div-set-regular div label{ + color: var(--On-Surface); + background-color: rgba(0, 0, 255, 0); + border: 1px solid var(--Outline); + + border-left: none; + /* border-right: none; */ + cursor: pointer; + display: flex; + height: 38px; + font-family: var(--google-mid); + font-size: 15px; + position: relative; + justify-content: center; + + align-items: center; + width: max-content; + padding-left: 15px; + padding-right: 15px; + transition: background-color 0.1s, padding 0.2s; + } + + .radio-div-set-regular div:first-child > label{ + border-bottom-left-radius: 50px; + + border-top-left-radius: 50px; + width: max-content; + display: flex; + align-items: center; + justify-content: center; + border-right: 1px solid var(--Outline) !important; + border-left: 1px solid var(--Outline) !important; + + + } + + .radio-div-set-regular div:last-child label{ + border-bottom-right-radius: 50px; + border-top-right-radius: 50px; + width: max-content; + display: flex; + align-items: center; + justify-content: center; + /* border-left: 1px solid var(--Outline); */ + border-right: 1px solid var(--Outline) !important; + + } + + .radio-div-set-regular div:last-child input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + pointer-events: none; + + } + + .radio-div-set-regular div:first-child input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + + pointer-events: none; + + + } + + + .radio-div-set-regular div input:checked + label { + background-color: var(--Secondary-Container); + color: var(--On-Secondary-Container); + pointer-events: none; + + } + + + + + + /* usage */ + + + + + /* Selected icon only + + + + + + */ + + + + + + /* Icon Ones + + + + */ + + + + /* Regular no icons + +
    + +
    + + +
    + + +
    + + +
    + +
    + + */ \ No newline at end of file diff --git a/app/src/main/assets/fonts/MaterialSymbols.ttf b/app/src/main/assets/fonts/MaterialSymbols.ttf new file mode 100644 index 000000000..0a03e2101 Binary files /dev/null and b/app/src/main/assets/fonts/MaterialSymbols.ttf differ diff --git a/app/src/main/assets/fonts/Outfit-Regular.ttf b/app/src/main/assets/fonts/Outfit-Regular.ttf new file mode 100644 index 000000000..826899cfe Binary files /dev/null and b/app/src/main/assets/fonts/Outfit-Regular.ttf differ diff --git a/app/src/main/assets/fonts/Poppins-Regular.ttf b/app/src/main/assets/fonts/Poppins-Regular.ttf new file mode 100644 index 000000000..9f0c71b70 Binary files /dev/null and b/app/src/main/assets/fonts/Poppins-Regular.ttf differ diff --git a/app/src/main/assets/fonts/ProductSans-Light.ttf b/app/src/main/assets/fonts/ProductSans-Light.ttf new file mode 100644 index 000000000..33de1c39f Binary files /dev/null and b/app/src/main/assets/fonts/ProductSans-Light.ttf differ diff --git a/app/src/main/assets/fonts/ProductSans-Medium.ttf b/app/src/main/assets/fonts/ProductSans-Medium.ttf new file mode 100644 index 000000000..fd818d6f5 Binary files /dev/null and b/app/src/main/assets/fonts/ProductSans-Medium.ttf differ diff --git a/app/src/main/assets/fonts/ProductSans-Regular.ttf b/app/src/main/assets/fonts/ProductSans-Regular.ttf new file mode 100644 index 000000000..e2c69c3fb Binary files /dev/null and b/app/src/main/assets/fonts/ProductSans-Regular.ttf differ diff --git a/app/src/main/assets/fonts/ProductSans-Thin.ttf b/app/src/main/assets/fonts/ProductSans-Thin.ttf new file mode 100644 index 000000000..5e046b532 Binary files /dev/null and b/app/src/main/assets/fonts/ProductSans-Thin.ttf differ diff --git a/app/src/main/assets/fonts/SpaceMono-Regular.ttf b/app/src/main/assets/fonts/SpaceMono-Regular.ttf new file mode 100644 index 000000000..04e56b923 Binary files /dev/null and b/app/src/main/assets/fonts/SpaceMono-Regular.ttf differ diff --git a/app/src/main/assets/icons/feels_like.svg b/app/src/main/assets/icons/feels_like.svg new file mode 100644 index 000000000..3bd72962e --- /dev/null +++ b/app/src/main/assets/icons/feels_like.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/icons/moonrise.svg b/app/src/main/assets/icons/moonrise.svg new file mode 100644 index 000000000..d42ac8162 --- /dev/null +++ b/app/src/main/assets/icons/moonrise.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/app/src/main/assets/icons/moonset.svg b/app/src/main/assets/icons/moonset.svg new file mode 100644 index 000000000..eebb8f872 --- /dev/null +++ b/app/src/main/assets/icons/moonset.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/app/src/main/assets/icons/sunrise.svg b/app/src/main/assets/icons/sunrise.svg new file mode 100644 index 000000000..c316e7069 --- /dev/null +++ b/app/src/main/assets/icons/sunrise.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/icons/sunset.svg b/app/src/main/assets/icons/sunset.svg new file mode 100644 index 000000000..1d8ba369b --- /dev/null +++ b/app/src/main/assets/icons/sunset.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/app/src/main/assets/icons/visibility.svg b/app/src/main/assets/icons/visibility.svg new file mode 100644 index 000000000..5991a0daf --- /dev/null +++ b/app/src/main/assets/icons/visibility.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html new file mode 100644 index 000000000..45dc86801 --- /dev/null +++ b/app/src/main/assets/index.html @@ -0,0 +1,362 @@ + + + + + + + Weather Home + + + + + + + + + +
    +
    + +

    + +

    +
    +
    + + + + +
    +
    + + +
    +
    +
    + +
    + Weather Icon +
    + +
    + +
    +

    39 °C

    +
    + +
    +

    Scattered clouds

    +
    + + +
    + +
    + + + +
    +
    +
    + thermostat +

    +
    + +
    + wind_power +

    +
    + +
    + cloud +

    +
    +
    +
    + + +
    + +
    +
    +

    Today

    +

    Mar, 19

    +
    +
    + +
    +
    + +
    +
    +
    +
    +

    Next 5 Days

    +

    Forecast

    +
    +
    + + +
    +
    + + +
    +
    +

    Sunrise & Sunset / Moonrise & Moonset

    +
    +
    + +
    + +

    +
    +
    + +

    +
    +
    + +

    +
    +
    + +

    +
    + +
    +
    + + +
    +
    + +

    Feels Like & Visibility

    + +
    +
    + +
    + +

    +
    +
    + +

    +
    +
    +
    + + +
    +
    +

    Air Quality

    +
    +
    + +
    + +
    +
    +
    +

    +
    +
    + +
    +
    +
    + +
    + +
    +
    +

    UV Index

    +
    +
    + +
    + +
    +
    +
    +

    +
    +
    + +
    +
    +
    + +
    + +
    +

    +
    + + + + +
    +
    +
    + + + + + + + + +
    + +
    + + + + +
    + + + + +
    +

    UI isn't made for Desktop devices

    +
    + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/index.js b/app/src/main/assets/index.js new file mode 100644 index 000000000..cc8575007 --- /dev/null +++ b/app/src/main/assets/index.js @@ -0,0 +1 @@ +import '@material/web/all.js' \ No newline at end of file diff --git a/app/src/main/assets/modules/call-themes.js b/app/src/main/assets/modules/call-themes.js new file mode 100644 index 000000000..841c853fa --- /dev/null +++ b/app/src/main/assets/modules/call-themes.js @@ -0,0 +1,592 @@ + + + + +function checkSearchScroll(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('search-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('search-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('search-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('search-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('search-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('search-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)') { + sendThemeToAndroid('search-charcol-dark'); + } else if (currentColorTheme === 'Material You (Hint orange 33)') { + sendThemeToAndroid('search-orange-dark'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('search-blueBright-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('search-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('search-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('search-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('search-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('search-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('search-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('search-pink-light'); + + } else if (currentColorTheme === 'Material You (Deep charcoal 83)') { + sendThemeToAndroid('search-charcol-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)') { + sendThemeToAndroid('search-orange-light'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('search-blueBright-light'); + } + else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('search-blue-light'); + } + + } +} + +// scrollMain + +function checkMainScroll(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('scroll-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('scroll-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('scroll-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('scroll-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('scroll-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('scroll-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)') { + sendThemeToAndroid('scroll-charcol-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)') { + sendThemeToAndroid('scroll-orange-dark'); + + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('scroll-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('scroll-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('scroll-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('scroll-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('scroll-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('scroll-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('scroll-pink-light'); + + } else if (currentColorTheme === 'Material You (Deep charcoal 83)') { + sendThemeToAndroid('scroll-charcol-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)') { + sendThemeToAndroid('scroll-orange-light'); + } + else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('scroll-blue-light'); + } + + } +} + + + +// ActivityColors + +function ActivityColor(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('Activitybluedark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('Activitypurpledark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('Activityyellowdark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('Activitygreendark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('Activityreddark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('ActivityPinkdark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('ActivityCharcoldark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('ActivityOrangedark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('Activitybluedark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('Activitybluelight'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('Activitypurplelight'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('Activityyellowlight'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('Activitygreenlight'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('Activityredlight'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('ActivityPinklight'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('ActivityCharcollight'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('ActivityOrangelight'); + } + else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('Activitybluelight'); + } + + } +} + +// ActivityColorsScrolled + +function ActivityColorScroll(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('activityScroll-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('activityScroll-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('activityScroll-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('activityScroll-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('activityScroll-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('activityScroll-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('activityScroll-charcol-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('activityScroll-orange-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('activityScroll-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('activityScroll-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('activityScroll-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('activityScroll-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('activityScroll-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('activityScroll-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('activityScroll-pink-light'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('activityScroll-charcol-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('activityScroll-orange-light'); + } + else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('activityScroll-blue-light'); + } + + } +} + + +// dialog + +function dialogcolor(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('dialog-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('dialog-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('dialog-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('dialog-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('dialog-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('dialog-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('dialog-charcoal-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('dialog-orange-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('dialog-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('dialog-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('dialog-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('dialog-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('dialog-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('dialog-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('dialog-pink-light'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('dialog-charcoal-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('dialog-orange-light'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('dialog-blue-light'); + } + + } +} + + +// dialogInverted + +function dialogcolorInverted(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('dialogInverted-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('dialogInverted-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('dialogInverted-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('dialogInverted-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('dialogInverted-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('dialogInverted-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('dialogInverted-charcoal-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('dialogInverted-orange-dark'); + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('dialogInverted-blue-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('dialogInverted-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('dialogInverted-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('dialogInverted-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('dialogInverted-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('dialogInverted-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('dialogInverted-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('dialogInverted-pink-light'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('dialogInverted-charcoal-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('dialogInverted-orange-light'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('dialogInverted-blue-light'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('dialogInverted-blue-light'); + } + + } +} + + +function dialogcolorFull(){ + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('dialogActvity-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('dialogActvity-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('dialogActvity-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('dialogActvity-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('dialogActvity-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('dialogActvity-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('dialogActvity-charcoal-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('dialogActvity-orange-dark'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('dialogActvity-blue-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('dialogActvity-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('dialogActvity-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('dialogActvity-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('dialogActvity-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('dialogActvity-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('dialogActvity-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('dialogActvity-pink-light'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('dialogActvity-charcoal-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('dialogActvity-orange-light'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('dialogActvity-blue-light'); + } + else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('dialogActvity-blue-light'); + } + + } +} + +// main + +function checkTHEME(){ + + const currentTheme = localStorage.getItem('ThemeMode'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)') { + sendThemeToAndroid('charcol-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)') { + sendThemeToAndroid('orange-dark'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('blue-bright-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('blue-dark'); + + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('pink-light'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)') { + sendThemeToAndroid('charcol-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)') { + sendThemeToAndroid('orange-light'); + + } else if (currentColorTheme === 'Material You (Blue bright P40)') { + sendThemeToAndroid('blue-bright-light'); + } + + else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('blue-light'); + + } + + } +} + + +function sendThemeToAndroid(theme) { + + AndroidInterface.updateStatusBarColor(theme); + + +}; + +// sheetColor + +function sheetcolorInverted(){ + const currentTheme = localStorage.getItem('theme'); + const currentColorTheme = localStorage.getItem('ColorScheme'); + + if (currentTheme === 'dark') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('sheetInverted-blue-dark'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('sheetInverted-purple-dark'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('sheetInverted-yellow-dark'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('sheetInverted-green-dark'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('sheetInverted-red-dark'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('sheetInverted-pink-dark'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('sheetInverted-charcoal-dark'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('sheetInverted-orange-dark'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('sheetInverted-blue-dark'); + } + + } else if (currentTheme === 'light') { + + if (currentColorTheme === 'Material You (Berry pop blue 44)') { + sendThemeToAndroid('sheetInverted-blue-light'); + } else if (currentColorTheme === 'Material You (Raisin purple 100)') { + sendThemeToAndroid('sheetInverted-purple-light'); + } else if (currentColorTheme === 'Material You (Olive pop green 49)') { + sendThemeToAndroid('sheetInverted-yellow-light'); + + } else if (currentColorTheme === 'Material You (Forest green 33)') { + sendThemeToAndroid('sheetInverted-green-light'); + + } else if (currentColorTheme === 'Material You (Chestnut cool red 122)') { + sendThemeToAndroid('sheetInverted-red-light'); + } else if (currentColorTheme === 'Material You (Raspberry pink P99)') { + sendThemeToAndroid('sheetInverted-pink-light'); + } else if (currentColorTheme === 'Material You (Deep charcoal 83)'){ + sendThemeToAndroid('sheetInverted-charcoal-light'); + + } else if (currentColorTheme === 'Material You (Hint orange 33)'){ + sendThemeToAndroid('sheetInverted-orange-light'); + + } else if (currentColorTheme === 'Material You (pop_blue_default)'){ + sendThemeToAndroid('sheetInverted-blue-light'); + } + + } +} + +// cool \ No newline at end of file diff --git a/app/src/main/assets/modules/ripple_acc.js b/app/src/main/assets/modules/ripple_acc.js new file mode 100644 index 000000000..dcc5d5fe3 --- /dev/null +++ b/app/src/main/assets/modules/ripple_acc.js @@ -0,0 +1,46 @@ + +document.addEventListener('DOMContentLoaded', function () { + var addripple = document.querySelectorAll('.ripple_btn'); + + addripple.forEach(function (element) { + var createRippleForOne = document.createElement('md-ripple'); + element.appendChild(createRippleForOne); + element.style.position = 'relative'; + }); +}); + +document.addEventListener('DOMContentLoaded', function () { + var addrippleDark = document.querySelectorAll('.ripple_btn_dark'); + + addrippleDark.forEach(function (elementDark) { + var createRippleForOneDark = document.createElement('md-ripple'); + elementDark.appendChild(createRippleForOneDark); + elementDark.style.position = 'relative'; + createRippleForOneDark.style = '--md-ripple-pressed-color: var(--Inverse-On-Surface);' + }); +}); + +document.addEventListener('DOMContentLoaded', function () { + var addrippleDarkFixed = document.querySelectorAll('.ripple_btn_dark_fix'); + + addrippleDarkFixed.forEach(function (elementDarkFixed) { + var createRippleForOneDarkFixed = document.createElement('md-ripple'); + elementDarkFixed.appendChild(createRippleForOneDarkFixed); + elementDarkFixed.style.position = 'relative'; + createRippleForOneDarkFixed.style = '--md-ripple-pressed-color: black'; + }); +}); + + + +document.addEventListener('DOMContentLoaded', function () { + var addripplelow = document.querySelectorAll('.ripple_btn_low'); + + addripplelow.forEach(function (elementrippleLow) { + var createRippleForOnelow = document.createElement('md-ripple'); + elementrippleLow.appendChild(createRippleForOnelow); + elementrippleLow.style.position = 'relative'; + createRippleForOnelow.style = '--md-ripple-pressed-opacity: 0.13;' + }); +}); + diff --git a/app/src/main/assets/modules/scroll.js b/app/src/main/assets/modules/scroll.js new file mode 100644 index 000000000..3ec666d8c --- /dev/null +++ b/app/src/main/assets/modules/scroll.js @@ -0,0 +1,25 @@ +const weatherWrap = document.getElementById('weather_wrap'); +const mainWeat = document.querySelector('.main-weat'); +const maxHeight = 180; +const minHeight = 0; +const maxOpacity = 1; +const minOpacity = 0; + +let ticking = false; + +if(weatherWrap){ +weatherWrap.addEventListener('scroll', function() { + if (!ticking) { + window.requestAnimationFrame(() => { + const scrollPosition = weatherWrap.scrollTop; + const newHeight = Math.max(minHeight, maxHeight - scrollPosition); + const newOpacity = Math.max(minOpacity, maxOpacity - (scrollPosition / maxHeight)); + mainWeat.style.transform = `scale(${newOpacity})`; + mainWeat.style.opacity = newOpacity; + ticking = false; + }); + ticking = true; + } +});} + + diff --git a/app/src/main/assets/modules/theme.js b/app/src/main/assets/modules/theme.js new file mode 100644 index 000000000..eb55e0e1d --- /dev/null +++ b/app/src/main/assets/modules/theme.js @@ -0,0 +1,98 @@ +const darkToggleSwitch = document.getElementById('dark_mode_switch'); +const IsDarkOn = localStorage.getItem('ThemeMode'); +const currentThemeType = localStorage.getItem('ColorScheme') +const themeNameText = document.getElementById('themeName'); + +darkToggleSwitch.addEventListener('change', () =>{ + if(darkToggleSwitch.selected){ + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('ThemeMode', 'dark') + checkTHEME(); + } else{ + document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('ThemeMode', 'light') + checkTHEME(); + } + + themeOverlaySwitch() +}); + +if(IsDarkOn === 'dark'){ + document.documentElement.setAttribute('data-theme', 'dark'); + darkToggleSwitch.selected = true; +} else{ + document.documentElement.setAttribute('data-theme', 'light'); + darkToggleSwitch.selected = false; +} + +const themeOptions = document.querySelectorAll('input[name="themes"]'); + +const themeOptionsCheck = () => { + const selectedThemevalue = document.querySelector('input[name="themes"]:checked'); + localStorage.setItem('ColorScheme', selectedThemevalue.value) + document.documentElement.setAttribute('data-color-theme', selectedThemevalue.value) + themeNameText.textContent = selectedThemevalue.value; + checkTHEME(); + + themeOverlaySwitch() + + } + + +themeOptions.forEach(radio => { + radio.addEventListener('input', themeOptionsCheck); + +}); + + +if (currentThemeType) { + const ThemeradioToCheck = document.querySelector(`input[name="themes"][value="${currentThemeType}"]`); + document.documentElement.setAttribute('data-color-theme', currentThemeType) + themeNameText.textContent = currentThemeType; + + ThemeradioToCheck.checked = true; + +} + + + +function sendThemeToAndroid(theme) { + + AndroidInterface.updateStatusBarColor(theme); + + + }; + + + // for adjusting scroll +function themeOverlaySwitch(){ + document.querySelector('.theme_overlay').hidden = false; + + const loader = document.getElementById('theme_loader'); + let loaderValue = 0; + + function increaseLoader() { + loaderValue += 0.3; + + loaderValue = Math.min(loaderValue, 1); + + loader.setAttribute('value', loaderValue.toString()); + } + + const intervalId = setInterval(increaseLoader, 200); + + + setTimeout(() =>{ + document.getElementById('headUser-1').scrollTop = 0; + }, 800); + + + setTimeout(() =>{ + document.querySelector('.theme_overlay').hidden = true; + loader.setAttribute('value', '0'); + + + + clearInterval(intervalId); + }, 1000); +} \ No newline at end of file diff --git a/app/src/main/assets/pages/AboutPage.html b/app/src/main/assets/pages/AboutPage.html new file mode 100644 index 000000000..5beb76333 --- /dev/null +++ b/app/src/main/assets/pages/AboutPage.html @@ -0,0 +1,160 @@ + + + + + + about Page + + + + + + + + + + + +
    +
    + +

    About WeatherMaster

    +
    +
    +

    About WeatherMaster

    +
    + + + + + privacy_tip +
    Terms and Conditions
    +     + + + policy +
    Privacy Policy
    +     + + + code +
    View source code
    +     + + + + system_update +
    Latest version
    +     + + + copyright +
    Third party licenses
    + +     + + + + info +
    Version
    +
    1.1.0 (W)
    +     + +     + + + + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html b/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html new file mode 100644 index 000000000..f1336276f --- /dev/null +++ b/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html @@ -0,0 +1,213 @@ + + + + + + + PrivacyPolicy Page + + + + + + + + + + +
    + +
    + +

    Privacy & Policy

    +
    +
    +

    Privacy & Policy

    +
    +

    This privacy policy applies to the WeatherMaster app (hereby referred to as "Application") for mobile + devices that was created by Pranshul (hereby referred to as "Service Provider") as an Open Source + service. This service is intended for use "AS IS".


    Information Collection and + Use +

    The Application collects information when you download and use it. This information may include + information such as

    +
      +
    • Your device's Internet Protocol address (e.g. IP address)
      • +
    • The pages of the Application that you visit, the time and date of your visit, the time spent on + those pages
      • +
    • The time spent on the Application
      • +
    • The operating system you use on your mobile device
      • +
    +


    +

    The Application does not gather precise information about the location of your + mobile device.

    +
    +

    The Application collects your device's location, which helps the Service Provider determine your + approximate geographical location and make use of in below ways:

    +
      +
    • Geolocation Services: The Service Provider utilizes location data to provide features such + as personalized content, relevant recommendations, and location-based services.
      • +
    • Analytics and Improvements: Aggregated and anonymized location data helps the Service + Provider to analyze user behavior, identify trends, and improve the overall performance and + functionality of the Application.
      • +
    • Third-Party Services: Periodically, the Service Provider may transmit anonymized location + data to external services. These services assist them in enhancing the Application and + optimizing their offerings.
      • +
    +

    +

    The Service Provider may use the information you provided to contact you from time to time to provide + you with important information, required notices and marketing promotions.


    +

    For a better experience, while using the Application, the Service Provider may require you to provide + us with certain personally identifiable information. The information that the Service Provider + request will be retained by them and used as described in this privacy policy.


    Third + Party Access +

    Only aggregated, anonymized data is periodically transmitted to external services to aid the Service + Provider in improving the Application and their service. The Service Provider may share your + information with third parties in the ways that are described in this privacy statement.

    +
    +

    The Service Provider may disclose User Provided and Automatically Collected Information:

    +
      +
    • as required by law, such as to comply with a subpoena, or similar legal process;
      • +
    • when they believe in good faith that disclosure is necessary to protect their rights, protect + your safety or the safety of others, investigate fraud, or respond to a government request;
      • +
    • with their trusted services providers who work on their behalf, do not have an independent use + of the information we disclose to them, and have agreed to adhere to the rules set forth in this + privacy statement.
      • +
    +


    Opt-Out Rights +

    You can stop all collection of information by the Application easily by uninstalling it. You may use + the standard uninstall processes as may be available as part of your mobile device or via the mobile + application marketplace or network.


    Data Retention Policy +

    The Service Provider will retain User Provided data for as long as you use the Application and for a + reasonable time thereafter. If you'd like them to delete User Provided Data that you have provided + via the Application, please contact them at pranshul.devmain@gmail.com and they will respond in a + reasonable time.


    Children +

    The Service Provider does not use the Application to knowingly solicit data from or market to + children under the age of 13.

    +

    +

    The Service Provider does not knowingly collect personally identifiable information from + children. The Service Provider encourages all children to never submit any personally + identifiable information through the Application and/or Services. The Service Provider encourage + parents and legal guardians to monitor their children's Internet usage and to help enforce this + Policy by instructing their children never to provide personally identifiable information + through the Application and/or Services without their permission. If you have reason to believe + that a child has provided personally identifiable information to the Service Provider through + the Application and/or Services, please contact the Service Provider + (pranshul.devmain@gmail.com) so that they will be able to take the necessary actions. You must + also be at least 16 years of age to consent to the processing of your personally identifiable + information in your country (in some countries we may allow your parent or guardian to do so on + your behalf).

    +

    Security +

    The Service Provider is concerned about safeguarding the confidentiality of your information. The + Service Provider provides physical, electronic, and procedural safeguards to protect information the + Service Provider processes and maintains.


    Changes +

    This Privacy Policy may be updated from time to time for any reason. The Service Provider will notify + you of any changes to the Privacy Policy by updating this page with the new Privacy Policy. You are + advised to consult this Privacy Policy regularly for any changes, as continued use is deemed + approval of all changes.


    +

    This privacy policy is effective as of 2024-06-16


    Your Consent +

    By using the Application, you are consenting to the processing of your information as set forth in + this Privacy Policy now and as amended by us.


    Contact Us +

    If you have any questions regarding privacy while using the Application, or have questions about the + practices, please contact the Service Provider via email at pranshul.devmain@gmail.com.

    + pranshul.devmain@gmail.com +
    +
    + +

    This Terms and Conditions page was generated by App Privacy Policy Generator

    +
    +
    +
    + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/pages/aboutPages/TermsConditions.html b/app/src/main/assets/pages/aboutPages/TermsConditions.html new file mode 100644 index 000000000..3a3b11177 --- /dev/null +++ b/app/src/main/assets/pages/aboutPages/TermsConditions.html @@ -0,0 +1,186 @@ + + + + + + + TermsConditions Page + + + + + + + + + + +
    + +
    + +

    Terms & Conditions

    +
    +
    +

    Terms & Conditions

    +
    +

    These terms and conditions applies to the WeatherMaster app (hereby referred to as "Application") for + mobile devices that was created by Pranshul (hereby referred to as "Service Provider") as an Open + Source service.


    +

    Upon downloading or utilizing the Application, you are automatically agreeing to the following terms. + It is strongly advised that you thoroughly read and understand these terms prior to using the + Application. Unauthorized copying, modification of the Application, any part of the Application, or + our trademarks is strictly prohibited. Any attempts to extract the source code of the Application, + translate the Application into other languages, or create derivative versions are not permitted. All + trademarks, copyrights, database rights, and other intellectual property rights related to the + Application remain the property of the Service Provider.


    +

    The Service Provider is dedicated to ensuring that the Application is as beneficial and efficient as + possible. As such, they reserve the right to modify the Application or charge for their services at + any time and for any reason. The Service Provider assures you that any charges for the Application + or its services will be clearly communicated to you.


    +

    The Application stores and processes personal data that you have provided to the Service Provider in + order to provide the Service. It is your responsibility to maintain the security of your phone and + access to the Application. The Service Provider strongly advise against jailbreaking or rooting your + phone, which involves removing software restrictions and limitations imposed by the official + operating system of your device. Such actions could expose your phone to malware, viruses, malicious + programs, compromise your phone's security features, and may result in the Application not + functioning correctly or at all.


    +

    Please be aware that the Service Provider does not assume responsibility for certain aspects. Some + functions of the Application require an active internet connection, which can be Wi-Fi or provided + by your mobile network provider. The Service Provider cannot be held responsible if the Application + does not function at full capacity due to lack of access to Wi-Fi or if you have exhausted your data + allowance.


    +

    If you are using the application outside of a Wi-Fi area, please be aware that your mobile network + provider's agreement terms still apply. Consequently, you may incur charges from your mobile + provider for data usage during the connection to the application, or other third-party charges. By + using the application, you accept responsibility for any such charges, including roaming data + charges if you use the application outside of your home territory (i.e., region or country) without + disabling data roaming. If you are not the bill payer for the device on which you are using the + application, they assume that you have obtained permission from the bill payer.


    +

    Similarly, the Service Provider cannot always assume responsibility for your usage of the + application. For instance, it is your responsibility to ensure that your device remains charged. If + your device runs out of battery and you are unable to access the Service, the Service Provider + cannot be held responsible.


    +

    In terms of the Service Provider's responsibility for your use of the application, it is important to + note that while they strive to ensure that it is updated and accurate at all times, they do rely on + third parties to provide information to them so that they can make it available to you. The Service + Provider accepts no liability for any loss, direct or indirect, that you experience as a result of + relying entirely on this functionality of the application.


    +

    The Service Provider may wish to update the application at some point. The application is currently + available as per the requirements for the operating system (and for any additional systems they + decide to extend the availability of the application to) may change, and you will need to download + the updates if you want to continue using the application. The Service Provider does not guarantee + that it will always update the application so that it is relevant to you and/or compatible with the + particular operating system version installed on your device. However, you agree to always accept + updates to the application when offered to you. The Service Provider may also wish to cease + providing the application and may terminate its use at any time without providing termination notice + to you. Unless they inform you otherwise, upon any termination, (a) the rights and licenses granted + to you in these terms will end; (b) you must cease using the application, and (if necessary) delete + it from your device.


    Changes to These Terms and Conditions +

    The Service Provider may periodically update their Terms and Conditions. Therefore, you are advised + to review this page regularly for any changes. The Service Provider will notify you of any changes + by posting the new Terms and Conditions on this page.


    +

    These terms and conditions are effective as of 2024-06-16


    Contact Us +

    If you have any questions or suggestions about the Terms and Conditions, please do not hesitate to + contact the Service Provider at

    + pranshul.devmain@gmail.com +
    +
    + +

    This Terms and Conditions page was generated by App Privacy Policy Generator

    +
    +
    +
    + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/pages/aboutPages/licenses.html b/app/src/main/assets/pages/aboutPages/licenses.html new file mode 100644 index 000000000..e89e1462a --- /dev/null +++ b/app/src/main/assets/pages/aboutPages/licenses.html @@ -0,0 +1,163 @@ + + + + + + + licenses Page + + + + + + + + + + + + + + +
    + +
    + +

    Third party licenses

    +
    +
    +

    Third party licenses

    +
    + +
    +

    Outfit

    + Rodrigo Fuenzalida, Smartsheet Inc +

    A beautiful geometric sans: The official typeface for brand automation + company outfit.io. Inspired by the ligature-rich outfit wordmark, Outfit.io is delighted to + release it's own type family. The Outfit typeface links the Outfit written voice to Outfit + product marks; on brand by default.

    + Open Font License +
    + +
    +

    Poppins

    + Indian Type Foundry, Jonny Pinhorn +

    Poppins is a geometric sans serif font supporting Devanagari and Latin + scripts. Its Latin glyphs are rationalist, while the Devanagari design, introduced in 2015, was + pioneering, featuring various weights. Developed by Indian Type Foundry, Poppins maintains + monolinear letterforms with optical corrections. It later expanded to include multiple weights + and italics by the ITF studio team.

    + Open Font License +
    + +
    +

    Material design components

    + Open Source Project +

    Material Web, or MWC, is a web component library aligned with Google's + Material Design guidelines. Supported by Google, it offers guidance for creating Material apps + and components, accessible on material.io. Material 3, the latest version, enhances experiences + with dynamic color, better accessibility, and support for large screen layouts and design + tokens.

    + Apache-2.0 +
    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/pages/settings.html b/app/src/main/assets/pages/settings.html new file mode 100644 index 000000000..5629d39a5 --- /dev/null +++ b/app/src/main/assets/pages/settings.html @@ -0,0 +1,332 @@ + + + + + + + Settings + + + + + + + + + + + + +
    +
    + +

    Settings

    +
    +
    +

    Settings

    +
    + +

    App looks

    + + + + + + dark_mode +
    Dark theme
    +
    Dark color scheme for the app
    + +     + + +
    + +
    + +
    + + +
    + +
    + + + +
    + +
    + + + +
    + +
    + + + +
    + +
    + + + +
    + +
    + + + +
    + +
    + + + +
    + +
    + + + +
    + +
    + + + +
    +
    +
    +     + +

    Weather

    + + + + notifications +
    Weather alerts
    +
    Show notification alerts whenever the weather changes
    + +     + + + device_thermostat +
    Temperature Unit
    + + +
    °F
    +     + +
    °C
    +     +     +     + + + + airwave +
    Wind Unit
    + + +
    Km/h
    +     + +
    Mph
    +     +     +     + + + visibility +
    Visibility Unit
    + + +
    km
    +     + +
    mile
    +     +     +     + +     + + +

    Additional

    + + + + format_paint +
    Theme name
    +
    +     + + + routine +
    Data provided by
    +
    OpenWeatherMap
    + open_in_new +     + + + info +
    About WeatherMaster
    +
    Learn about the app
    + chevron_right +     + +     + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/src/main/assets/ripple-files/icon-ripple.js b/app/src/main/assets/ripple-files/icon-ripple.js new file mode 100644 index 000000000..445a8ff90 --- /dev/null +++ b/app/src/main/assets/ripple-files/icon-ripple.js @@ -0,0 +1,25 @@ +function playEffect(button) { + button.classList.add('touched'); + + button.classList.remove('touchedfade'); + +} +function playEffect2(button) { + + + + setTimeout(()=>{ + button.classList.add('touchedfade'); + }, 200); + + setTimeout(()=>{ + button.classList.remove('touched'); + button.classList.remove('touchedfade'); + }, 300); +} + + + + + + diff --git a/app/src/main/assets/ripple-files/ripple.css b/app/src/main/assets/ripple-files/ripple.css new file mode 100644 index 000000000..95347e4e6 --- /dev/null +++ b/app/src/main/assets/ripple-files/ripple.css @@ -0,0 +1,231 @@ +.md-ripples { + position: relative; + overflow: hidden; + +} + +.ripples-bounded .ripple { + background-color:var(--On-Surface); + opacity: 0.2; + animation: ripple3 150ms ease-out !important; + } + + + + .ripples-inverse .ripple { + background-color:var(--Inverse-Primary); + opacity: 0.25; + animation: ripple2 130ms ease-out !important; +} + + .ripples-dialog .ripple { + background-color:var(--Primary); + opacity: 0.25; + animation: ripple 100ms ease-out !important; + } + + .ripples-full .ripple { + background-color:var(--Primary); + opacity: 0.25; + animation: ripple 130ms ease-out !important; +} + + button-outlined .ripple, button-tonal .ripple, text-button .ripple, fab .ripple, fab-small .ripple, fab-large .ripple, button-outlined-i .ripple, button-tonal-i .ripple, text-button-i .ripple{ + background-color:var(--Primary); + opacity: 0.25; + animation: ripple2 130ms ease-out !important; +} + +button-filled .ripple, button-filled-i .ripple{ + background-color:var(--ripple-bounded); + opacity: 0.25; + animation: ripple2 130ms ease-out !important; +} + + .ripple { + background-color: #000; + position: absolute; + border-radius: 50%; + touch-action: none !important; + pointer-events: none !important; + animation: ripple 70ms ease-out !important; + } + + /* icon */ + + .ripple-icon-btn { + position: relative; + cursor: pointer; + border-radius: 50%; + border: none; + } + + + .ripple-icon-btn.regular{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--On-Surface); + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + flex-shrink: 0; + } + + .ripple-icon-btn.regular.filled{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--On-Primary); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Primary); + } + + .ripple-icon-btn.regular.tonal{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--On-Secondary-Container); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Secondary-Container); + } + + .ripple-icon-btn.regular.outlined{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--Primary); + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border: 1px solid var(--Outline); + } + + + .ripple-icon-btn.regular.primary{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--On-Primary-Container); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Primary-Container); + } + + .ripple-icon-btn.regular.tertiary{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--On-Tertiary-Container); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Tertiary-Container); + } + + .ripple-icon-btn.regular.surface{ + width: 40px; + height: 40px; + border-radius: 50px; + font-size: 24px; + color: var(--On-Surface); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Surface-Container-High); + } + + + .ripple-effect-icon { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + background-color: rgb(255,255,255, 0); + border-radius: 50%; + opacity: 0; + transform: scale(1.5); + transition: transform 0.15s, opacity 0.1s; + pointer-events: none; + } + + + + .ripple-icon-btn.touched .ripple-effect-icon { + transform: scale(1); + background-color: var(--ripple-unbounded); + opacity: 0.17; + + } + + + + .ripple-icon-btn.touchedfade .ripple-effect-icon { + transition: opacity 0.2s, scale 0.2s; + opacity: 0; + scale: 1.2; + + } + + .ripple-icon-btn[disabled]{ + pointer-events: none; + color: red; + opacity: 0.5; + } + + +@keyframes ripple { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} + +@keyframes ripple2 { + 0% { + transform: scale(0.3); + + } + 100% { + transform: scale(1); + + } +} + +@keyframes ripple3 { + 0% { + transform: scale(0.5); + + } + 100% { + transform: scale(1); + + } + } + + +/* icon-ripple */ + + +/* */ \ No newline at end of file diff --git a/app/src/main/assets/ripple-files/ripples.js b/app/src/main/assets/ripple-files/ripples.js new file mode 100644 index 000000000..c64988465 --- /dev/null +++ b/app/src/main/assets/ripple-files/ripples.js @@ -0,0 +1,2 @@ +/*! For license information please see ripples.js.LICENSE.txt */ +(()=>{var e={750:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(645),i=n.n(r)()((function(e){return e[1]}));i.push([e.id,".md-ripples{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.ripples-light .ripple{background-color:#fff}.ripples-dark .ripple{background-color:#000}.ripple{background-color:#000;opacity:.16;position:absolute;border-radius:50%;pointer-events:none;animation:ripple .3s ease-out}@keyframes ripple{from{transform:scale(0)}to{transform:scale(1)}}",""]);const o=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(r)for(var o=0;o0&&t-1 in e)}E.fn=E.prototype={jquery:C,constructor:E,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=E.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return E.each(this,e)},map:function(e){return this.pushStack(E.map(this,(function(t,n){return e.call(t,n,t)})))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(E.grep(this,(function(e,t){return(t+1)%2})))},odd:function(){return this.pushStack(E.grep(this,(function(e,t){return t%2})))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n+~]|[\\x20\\t\\r\\n\\f])[\\x20\\t\\r\\n\\f]*"),U=new RegExp(R+"|>"),X=new RegExp(B),V=new RegExp("^"+I+"$"),Y={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+B),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\([\\x20\\t\\r\\n\\f]*(even|odd|(([+-]|)(\\d*)n|)[\\x20\\t\\r\\n\\f]*(?:([+-]|)[\\x20\\t\\r\\n\\f]*(\\d+)|))[\\x20\\t\\r\\n\\f]*\\)|)","i"),bool:new RegExp("^(?:"+M+")$","i"),needsContext:new RegExp("^[\\x20\\t\\r\\n\\f]*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\([\\x20\\t\\r\\n\\f]*((?:-\\d)?\\d*)[\\x20\\t\\r\\n\\f]*\\)|)(?=[^-]|$)","i")},G=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}[\\x20\\t\\r\\n\\f]?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){p()},ae=be((function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()}),{dir:"parentNode",next:"legend"});try{H.apply(D=O.call(w.childNodes),w.childNodes),D[w.childNodes.length].nodeType}catch(e){H={apply:D.length?function(e,t){q.apply(e,O.call(t))}:function(e,t){for(var n=e.length,r=0;e[n++]=t[r++];);e.length=n-1}}}function se(e,t,r,i){var o,s,l,c,f,h,m,y=t&&t.ownerDocument,w=t?t.nodeType:9;if(r=r||[],"string"!=typeof e||!e||1!==w&&9!==w&&11!==w)return r;if(!i&&(p(t),t=t||d,g)){if(11!==w&&(f=Z.exec(e)))if(o=f[1]){if(9===w){if(!(l=t.getElementById(o)))return r;if(l.id===o)return r.push(l),r}else if(y&&(l=y.getElementById(o))&&x(t,l)&&l.id===o)return r.push(l),r}else{if(f[2])return H.apply(r,t.getElementsByTagName(e)),r;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return H.apply(r,t.getElementsByClassName(o)),r}if(n.qsa&&!A[e+" "]&&(!v||!v.test(e))&&(1!==w||"object"!==t.nodeName.toLowerCase())){if(m=e,y=t,1===w&&(U.test(e)||z.test(e))){for((y=ee.test(e)&&me(t.parentNode)||t)===t&&n.scope||((c=t.getAttribute("id"))?c=c.replace(re,ie):t.setAttribute("id",c=b)),s=(h=a(e)).length;s--;)h[s]=(c?"#"+c:":scope")+" "+xe(h[s]);m=h.join(",")}try{return H.apply(r,y.querySelectorAll(m)),r}catch(t){A(e,!0)}finally{c===b&&t.removeAttribute("id")}}}return u(e.replace($,"$1"),t,r,i)}function ue(){var e=[];return function t(n,i){return e.push(n+" ")>r.cacheLength&&delete t[e.shift()],t[n+" "]=i}}function le(e){return e[b]=!0,e}function ce(e){var t=d.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){for(var n=e.split("|"),i=n.length;i--;)r.attrHandle[n[i]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)for(;n=n.nextSibling;)if(n===t)return-1;return e?1:-1}function de(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function he(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function ge(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&ae(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function ve(e){return le((function(t){return t=+t,le((function(n,r){for(var i,o=e([],n.length,t),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))}))}))}function me(e){return e&&void 0!==e.getElementsByTagName&&e}for(t in n=se.support={},o=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!G.test(t||n&&n.nodeName||"HTML")},p=se.setDocument=function(e){var t,i,a=e?e.ownerDocument||e:w;return a!=d&&9===a.nodeType&&a.documentElement?(h=(d=a).documentElement,g=!o(d),w!=d&&(i=d.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",oe,!1):i.attachEvent&&i.attachEvent("onunload",oe)),n.scope=ce((function(e){return h.appendChild(e).appendChild(d.createElement("div")),void 0!==e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length})),n.attributes=ce((function(e){return e.className="i",!e.getAttribute("className")})),n.getElementsByTagName=ce((function(e){return e.appendChild(d.createComment("")),!e.getElementsByTagName("*").length})),n.getElementsByClassName=K.test(d.getElementsByClassName),n.getById=ce((function(e){return h.appendChild(e).id=b,!d.getElementsByName||!d.getElementsByName(b).length})),n.getById?(r.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},r.find.ID=function(e,t){if(void 0!==t.getElementById&&g){var n=t.getElementById(e);return n?[n]:[]}}):(r.filter.ID=function(e){var t=e.replace(te,ne);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},r.find.ID=function(e,t){if(void 0!==t.getElementById&&g){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];for(i=t.getElementsByName(e),r=0;o=i[r++];)if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[i++];)1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(e,t){if(void 0!==t.getElementsByClassName&&g)return t.getElementsByClassName(e)},m=[],v=[],(n.qsa=K.test(d.querySelectorAll))&&(ce((function(e){var t;h.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]=[\\x20\\t\\r\\n\\f]*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\[[\\x20\\t\\r\\n\\f]*(?:value|"+M+")"),e.querySelectorAll("[id~="+b+"-]").length||v.push("~="),(t=d.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\[[\\x20\\t\\r\\n\\f]*name[\\x20\\t\\r\\n\\f]*=[\\x20\\t\\r\\n\\f]*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+b+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")})),ce((function(e){e.innerHTML="";var t=d.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name[\\x20\\t\\r\\n\\f]*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),h.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")}))),(n.matchesSelector=K.test(y=h.matches||h.webkitMatchesSelector||h.mozMatchesSelector||h.oMatchesSelector||h.msMatchesSelector))&&ce((function(e){n.disconnectedMatch=y.call(e,"*"),y.call(e,"[s!='']:x"),m.push("!=",B)})),v=v.length&&new RegExp(v.join("|")),m=m.length&&new RegExp(m.join("|")),t=K.test(h.compareDocumentPosition),x=t||K.test(h.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},N=t?function(e,t){if(e===t)return f=!0,0;var r=!e.compareDocumentPosition-!t.compareDocumentPosition;return r||(1&(r=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!n.sortDetached&&t.compareDocumentPosition(e)===r?e==d||e.ownerDocument==w&&x(w,e)?-1:t==d||t.ownerDocument==w&&x(w,t)?1:c?P(c,e)-P(c,t):0:4&r?-1:1)}:function(e,t){if(e===t)return f=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==d?-1:t==d?1:i?-1:o?1:c?P(c,e)-P(c,t):0;if(i===o)return pe(e,t);for(n=e;n=n.parentNode;)a.unshift(n);for(n=t;n=n.parentNode;)s.unshift(n);for(;a[r]===s[r];)r++;return r?pe(a[r],s[r]):a[r]==w?-1:s[r]==w?1:0},d):d},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(p(e),n.matchesSelector&&g&&!A[t+" "]&&(!m||!m.test(t))&&(!v||!v.test(t)))try{var r=y.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){A(t,!0)}return se(t,d,null,[e]).length>0},se.contains=function(e,t){return(e.ownerDocument||e)!=d&&p(e),x(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!=d&&p(e);var i=r.attrHandle[t.toLowerCase()],o=i&&j.call(r.attrHandle,t.toLowerCase())?i(e,t,!g):void 0;return void 0!==o?o:n.attributes||!g?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,r=[],i=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&e.slice(0),e.sort(N),f){for(;t=e[o++];)t===e[o]&&(i=r.push(o));for(;i--;)e.splice(r[i],1)}return c=null,e},i=se.getText=function(e){var t,n="",r=0,o=e.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=i(e)}else if(3===o||4===o)return e.nodeValue}else for(;t=e[r++];)n+=i(t);return n},(r=se.selectors={cacheLength:50,createPseudo:le,match:Y,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return Y.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=a(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=E[e+" "];return t||(t=new RegExp("(^|[\\x20\\t\\r\\n\\f])"+e+"("+R+"|$)"))&&E(e,(function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")}))},ATTR:function(e,t,n){return function(r){var i=se.attr(r,e);return null==i?"!="===t:!t||(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i.replace(F," ")+" ").indexOf(n)>-1:"|="===t&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",v=t.parentNode,m=s&&t.nodeName.toLowerCase(),y=!u&&!s,x=!1;if(v){if(o){for(;g;){for(p=t;p=p[g];)if(s?p.nodeName.toLowerCase()===m:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?v.firstChild:v.lastChild],a&&y){for(x=(d=(l=(c=(f=(p=v)[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1])&&l[2],p=d&&v.childNodes[d];p=++d&&p&&p[g]||(x=d=0)||h.pop();)if(1===p.nodeType&&++x&&p===t){c[e]=[T,d,x];break}}else if(y&&(x=d=(l=(c=(f=(p=t)[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1]),!1===x)for(;(p=++d&&p&&p[g]||(x=d=0)||h.pop())&&((s?p.nodeName.toLowerCase()!==m:1!==p.nodeType)||!++x||(y&&((c=(f=p[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]=[T,x]),p!==t)););return(x-=i)===r||x%r==0&&x/r>=0}}},PSEUDO:function(e,t){var n,i=r.pseudos[e]||r.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return i[b]?i(t):i.length>1?(n=[e,e,"",t],r.setFilters.hasOwnProperty(e.toLowerCase())?le((function(e,n){for(var r,o=i(e,t),a=o.length;a--;)e[r=P(e,o[a])]=!(n[r]=o[a])})):function(e){return i(e,0,n)}):i}},pseudos:{not:le((function(e){var t=[],n=[],r=s(e.replace($,"$1"));return r[b]?le((function(e,t,n,i){for(var o,a=r(e,null,i,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))})):function(e,i,o){return t[0]=e,r(t,null,o,n),t[0]=null,!n.pop()}})),has:le((function(e){return function(t){return se(e,t).length>0}})),contains:le((function(e){return e=e.replace(te,ne),function(t){return(t.textContent||i(t)).indexOf(e)>-1}})),lang:le((function(e){return V.test(e||"")||se.error("unsupported lang: "+e),e=e.replace(te,ne).toLowerCase(),function(t){var n;do{if(n=g?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}})),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===h},focus:function(e){return e===d.activeElement&&(!d.hasFocus||d.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!r.pseudos.empty(e)},header:function(e){return J.test(e.nodeName)},input:function(e){return Q.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve((function(){return[0]})),last:ve((function(e,t){return[t-1]})),eq:ve((function(e,t,n){return[n<0?n+t:n]})),even:ve((function(e,t){for(var n=0;nt?t:n;--r>=0;)e.push(r);return e})),gt:ve((function(e,t,n){for(var r=n<0?n+t:n;++r1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function Te(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s-1&&(o[l]=!(a[l]=f))}}else m=Te(m===a?m.splice(h,m.length):m),i?i(null,a,m,u):H.apply(a,m)}))}function Ee(e){for(var t,n,i,o=e.length,a=r.relative[e[0].type],s=a||r.relative[" "],u=a?1:0,c=be((function(e){return e===t}),s,!0),f=be((function(e){return P(t,e)>-1}),s,!0),p=[function(e,n,r){var i=!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):f(e,n,r));return t=null,i}];u1&&we(p),u>1&&xe(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace($,"$1"),n,u0,i=e.length>0,o=function(o,a,s,u,c){var f,h,v,m=0,y="0",x=o&&[],b=[],w=l,C=o||i&&r.find.TAG("*",c),E=T+=null==w?1:Math.random()||.1,S=C.length;for(c&&(l=a==d||a||c);y!==S&&null!=(f=C[y]);y++){if(i&&f){for(h=0,a||f.ownerDocument==d||(p(f),s=!g);v=e[h++];)if(v(f,a||d,s)){u.push(f);break}c&&(T=E)}n&&((f=!v&&f)&&m--,o&&x.push(f))}if(m+=y,n&&y!==m){for(h=0;v=t[h++];)v(x,b,a,s);if(o){if(m>0)for(;y--;)x[y]||b[y]||(b[y]=L.call(u));b=Te(b)}H.apply(u,b),c&&!o&&b.length>0&&m+t.length>1&&se.uniqueSort(u)}return c&&(T=E,l=w),x};return n?le(o):o}(o,i))).selector=e}return s},u=se.select=function(e,t,n,i){var o,u,l,c,f,p="function"==typeof e&&e,d=!i&&a(e=p.selector||e);if(n=n||[],1===d.length){if((u=d[0]=d[0].slice(0)).length>2&&"ID"===(l=u[0]).type&&9===t.nodeType&&g&&r.relative[u[1].type]){if(!(t=(r.find.ID(l.matches[0].replace(te,ne),t)||[])[0]))return n;p&&(t=t.parentNode),e=e.slice(u.shift().value.length)}for(o=Y.needsContext.test(e)?0:u.length;o--&&(l=u[o],!r.relative[c=l.type]);)if((f=r.find[c])&&(i=f(l.matches[0].replace(te,ne),ee.test(u[0].type)&&me(t.parentNode)||t))){if(u.splice(o,1),!(e=i.length&&xe(u)))return H.apply(n,i),n;break}}return(p||s(e,d))(i,t,!g,n,!t||ee.test(e)&&me(t.parentNode)||t),n},n.sortStable=b.split("").sort(N).join("")===b,n.detectDuplicates=!!f,p(),n.sortDetached=ce((function(e){return 1&e.compareDocumentPosition(d.createElement("fieldset"))})),ce((function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")}))||fe("type|href|height|width",(function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)})),n.attributes&&ce((function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")}))||fe("value",(function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue})),ce((function(e){return null==e.getAttribute("disabled")}))||fe(M,(function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null})),se}(r);E.find=k,E.expr=k.selectors,E.expr[":"]=E.expr.pseudos,E.uniqueSort=E.unique=k.uniqueSort,E.text=k.getText,E.isXMLDoc=k.isXML,E.contains=k.contains,E.escapeSelector=k.escape;var A=function(e,t,n){for(var r=[],i=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(i&&E(e).is(n))break;r.push(e)}return r},N=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},j=E.expr.match.needsContext;function D(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var L=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function q(e,t,n){return m(t)?E.grep(e,(function(e,r){return!!t.call(e,r,e)!==n})):t.nodeType?E.grep(e,(function(e){return e===t!==n})):"string"!=typeof t?E.grep(e,(function(e){return c.call(t,e)>-1!==n})):E.filter(t,e,n)}E.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?E.find.matchesSelector(r,e)?[r]:[]:E.find.matches(e,E.grep(t,(function(e){return 1===e.nodeType})))},E.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(E(e).filter((function(){for(t=0;t1?E.uniqueSort(n):n},filter:function(e){return this.pushStack(q(this,e||[],!1))},not:function(e){return this.pushStack(q(this,e||[],!0))},is:function(e){return!!q(this,"string"==typeof e&&j.test(e)?E(e):e||[],!1).length}});var H,O=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||H,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:O.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:x,!0)),L.test(r[1])&&E.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=x.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,H=E(x);var P=/^(?:parents|prev(?:Until|All))/,M={children:!0,contents:!0,next:!0,prev:!0};function R(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter((function(){for(var e=0;e-1:1===n.nodeType&&E.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?E.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?c.call(E(e),this[0]):c.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(E.uniqueSort(E.merge(this.get(),E(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),E.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return A(e,"parentNode")},parentsUntil:function(e,t,n){return A(e,"parentNode",n)},next:function(e){return R(e,"nextSibling")},prev:function(e){return R(e,"previousSibling")},nextAll:function(e){return A(e,"nextSibling")},prevAll:function(e){return A(e,"previousSibling")},nextUntil:function(e,t,n){return A(e,"nextSibling",n)},prevUntil:function(e,t,n){return A(e,"previousSibling",n)},siblings:function(e){return N((e.parentNode||{}).firstChild,e)},children:function(e){return N(e.firstChild)},contents:function(e){return null!=e.contentDocument&&a(e.contentDocument)?e.contentDocument:(D(e,"template")&&(e=e.content||e),E.merge([],e.childNodes))}},(function(e,t){E.fn[e]=function(n,r){var i=E.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=E.filter(r,i)),this.length>1&&(M[e]||E.uniqueSort(i),P.test(e)&&i.reverse()),this.pushStack(i)}}));var I=/[^\x20\t\r\n\f]+/g;function W(e){return e}function B(e){throw e}function F(e,t,n,r){var i;try{e&&m(i=e.promise)?i.call(e).done(t).fail(n):e&&m(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}E.Callbacks=function(e){e="string"==typeof e?function(e){var t={};return E.each(e.match(I)||[],(function(e,n){t[n]=!0})),t}(e):E.extend({},e);var t,n,r,i,o=[],a=[],s=-1,u=function(){for(i=i||e.once,r=t=!0;a.length;s=-1)for(n=a.shift();++s-1;)o.splice(n,1),n<=s&&s--})),this},has:function(e){return e?E.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||u()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!r}};return l},E.extend({Deferred:function(e){var t=[["notify","progress",E.Callbacks("memory"),E.Callbacks("memory"),2],["resolve","done",E.Callbacks("once memory"),E.Callbacks("once memory"),0,"resolved"],["reject","fail",E.Callbacks("once memory"),E.Callbacks("once memory"),1,"rejected"]],n="pending",i={state:function(){return n},always:function(){return o.done(arguments).fail(arguments),this},catch:function(e){return i.then(null,e)},pipe:function(){var e=arguments;return E.Deferred((function(n){E.each(t,(function(t,r){var i=m(e[r[4]])&&e[r[4]];o[r[1]]((function(){var e=i&&i.apply(this,arguments);e&&m(e.promise)?e.promise().progress(n.notify).done(n.resolve).fail(n.reject):n[r[0]+"With"](this,i?[e]:arguments)}))})),e=null})).promise()},then:function(e,n,i){var o=0;function a(e,t,n,i){return function(){var s=this,u=arguments,l=function(){var r,l;if(!(e=o&&(n!==B&&(s=void 0,u=[r]),t.rejectWith(s,u))}};e?c():(E.Deferred.getStackHook&&(c.stackTrace=E.Deferred.getStackHook()),r.setTimeout(c))}}return E.Deferred((function(r){t[0][3].add(a(0,r,m(i)?i:W,r.notifyWith)),t[1][3].add(a(0,r,m(e)?e:W)),t[2][3].add(a(0,r,m(n)?n:B))})).promise()},promise:function(e){return null!=e?E.extend(e,i):i}},o={};return E.each(t,(function(e,r){var a=r[2],s=r[5];i[r[1]]=a.add,s&&a.add((function(){n=s}),t[3-e][2].disable,t[3-e][3].disable,t[0][2].lock,t[0][3].lock),a.add(r[3].fire),o[r[0]]=function(){return o[r[0]+"With"](this===o?void 0:this,arguments),this},o[r[0]+"With"]=a.fireWith})),i.promise(o),e&&e.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=s.call(arguments),o=E.Deferred(),a=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?s.call(arguments):n,--t||o.resolveWith(r,i)}};if(t<=1&&(F(e,o.done(a(n)).resolve,o.reject,!t),"pending"===o.state()||m(i[n]&&i[n].then)))return o.then();for(;n--;)F(i[n],a(n),o.reject);return o.promise()}});var $=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;E.Deferred.exceptionHook=function(e,t){r.console&&r.console.warn&&e&&$.test(e.name)&&r.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},E.readyException=function(e){r.setTimeout((function(){throw e}))};var _=E.Deferred();function z(){x.removeEventListener("DOMContentLoaded",z),r.removeEventListener("load",z),E.ready()}E.fn.ready=function(e){return _.then(e).catch((function(e){E.readyException(e)})),this},E.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--E.readyWait:E.isReady)||(E.isReady=!0,!0!==e&&--E.readyWait>0||_.resolveWith(x,[E]))}}),E.ready.then=_.then,"complete"===x.readyState||"loading"!==x.readyState&&!x.documentElement.doScroll?r.setTimeout(E.ready):(x.addEventListener("DOMContentLoaded",z),r.addEventListener("load",z));var U=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===T(n))for(s in i=!0,n)U(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,m(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(E(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each((function(){Z.remove(this,e)}))}}),E.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=K.get(e,t),n&&(!r||Array.isArray(n)?r=K.access(e,t,E.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=E.queue(e,t),r=n.length,i=n.shift(),o=E._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,(function(){E.dequeue(e,t)}),o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return K.get(e,n)||K.access(e,n,{empty:E.Callbacks("once memory").add((function(){K.remove(e,[t+"queue",n])}))})}}),E.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]*)/i,ye=/^$|^module$|\/(?:java|ecma)script/i;he=x.createDocumentFragment().appendChild(x.createElement("div")),(ge=x.createElement("input")).setAttribute("type","radio"),ge.setAttribute("checked","checked"),ge.setAttribute("name","t"),he.appendChild(ge),v.checkClone=he.cloneNode(!0).cloneNode(!0).lastChild.checked,he.innerHTML="",v.noCloneChecked=!!he.cloneNode(!0).lastChild.defaultValue,he.innerHTML="",v.option=!!he.lastChild;var xe={thead:[1,"","
    "],col:[2,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],_default:[0,"",""]};function be(e,t){var n;return n=void 0!==e.getElementsByTagName?e.getElementsByTagName(t||"*"):void 0!==e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&D(e,t)?E.merge([e],n):n}function we(e,t){for(var n=0,r=e.length;n",""]);var Te=/<|&#?\w+;/;function Ce(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d-1)i&&i.push(o);else if(l=se(o),a=be(f.appendChild(o),"script"),l&&we(a),n)for(c=0;o=a[c++];)ye.test(o.type||"")&&n.push(o);return f}var Ee=/^([^.]*)(?:\.(.+)|)/;function Se(){return!0}function ke(){return!1}function Ae(e,t){return e===function(){try{return x.activeElement}catch(e){}}()==("focus"===t)}function Ne(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ne(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=ke;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return E().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=E.guid++)),e.each((function(){E.event.add(this,t,i,r,n)}))}function je(e,t,n){n?(K.set(e,t,!1),E.event.add(e,t,{namespace:!1,handler:function(e){var r,i,o=K.get(this,t);if(1&e.isTrigger&&this[t]){if(o.length)(E.event.special[t]||{}).delegateType&&e.stopPropagation();else if(o=s.call(arguments),K.set(this,t,o),r=n(this,t),this[t](),o!==(i=K.get(this,t))||r?K.set(this,t,!1):i={},o!==i)return e.stopImmediatePropagation(),e.preventDefault(),i&&i.value}else o.length&&(K.set(this,t,{value:E.event.trigger(E.extend(o[0],E.Event.prototype),o.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===K.get(e,t)&&E.event.add(e,t,Se)}E.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=K.get(e);if(Q(e))for(n.handler&&(n=(o=n).handler,i=o.selector),i&&E.find.matchesSelector(ae,i),n.guid||(n.guid=E.guid++),(u=v.events)||(u=v.events=Object.create(null)),(a=v.handle)||(a=v.handle=function(t){return void 0!==E&&E.event.triggered!==t.type?E.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(I)||[""]).length;l--;)d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=E.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=E.event.special[d]||{},c=E.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&E.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),E.event.global[d]=!0)},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=K.hasData(e)&&K.get(e);if(v&&(u=v.events)){for(l=(t=(t||"").match(I)||[""]).length;l--;)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){for(f=E.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||E.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)E.event.remove(e,d+t[l],n,r,!0);E.isEmptyObject(u)&&K.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=new Array(arguments.length),u=E.event.fix(e),l=(K.get(this,"events")||Object.create(null))[u.type]||[],c=E.event.special[u.type]||{};for(s[0]=u,t=1;t=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:E.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\s*$/g;function He(e,t){return D(e,"table")&&D(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function Oe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Pe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(K.hasData(e)&&(s=K.get(e).events))for(i in K.remove(t,"handle events"),s)for(n=0,r=s[i].length;n1&&"string"==typeof h&&!v.checkClone&&Le.test(h))return e.each((function(i){var o=e.eq(i);g&&(t[0]=h.call(this,i,o.html())),Ie(o,t,n,r)}));if(p&&(o=(i=Ce(t,e[0].ownerDocument,!1,e,r)).firstChild,1===i.childNodes.length&&(i=o),o||r)){for(s=(a=E.map(be(i,"script"),Oe)).length;f0&&we(a,!u&&be(e,"script")),s},cleanData:function(e){for(var t,n,r,i=E.event.special,o=0;void 0!==(n=e[o]);o++)if(Q(n)){if(t=n[K.expando]){if(t.events)for(r in t.events)i[r]?E.event.remove(n,r):E.removeEvent(n,r,t.handle);n[K.expando]=void 0}n[Z.expando]&&(n[Z.expando]=void 0)}}}),E.fn.extend({detach:function(e){return We(this,e,!0)},remove:function(e){return We(this,e)},text:function(e){return U(this,(function(e){return void 0===e?E.text(this):this.empty().each((function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)}))}),null,e,arguments.length)},append:function(){return Ie(this,arguments,(function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||He(this,e).appendChild(e)}))},prepend:function(){return Ie(this,arguments,(function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=He(this,e);t.insertBefore(e,t.firstChild)}}))},before:function(){return Ie(this,arguments,(function(e){this.parentNode&&this.parentNode.insertBefore(e,this)}))},after:function(){return Ie(this,arguments,(function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)}))},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(E.cleanData(be(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map((function(){return E.clone(this,e,t)}))},html:function(e){return U(this,(function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!De.test(e)&&!xe[(me.exec(e)||["",""])[1].toLowerCase()]){e=E.htmlPrefilter(e);try{for(;n=0&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function nt(e,t,n){var r=Fe(e),i=(!v.boxSizingReliable()||n)&&"border-box"===E.css(e,"boxSizing",!1,r),o=i,a=ze(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Be.test(a)){if(!n)return a;a="auto"}return(!v.boxSizingReliable()&&i||!v.reliableTrDimensions()&&D(e,"tr")||"auto"===a||!parseFloat(a)&&"inline"===E.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===E.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+tt(e,t,n||(i?"border":"content"),o,r,a)+"px"}function rt(e,t,n,r,i){return new rt.prototype.init(e,t,n,r,i)}E.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=ze(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=G(t),u=Je.test(t),l=e.style;if(u||(t=Ge(s)),a=E.cssHooks[t]||E.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"==(o=typeof n)&&(i=ie.exec(n))&&i[1]&&(n=ce(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(E.cssNumber[s]?"":"px")),v.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=G(t);return Je.test(t)||(t=Ge(s)),(a=E.cssHooks[t]||E.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=ze(e,t,r)),"normal"===i&&t in Ze&&(i=Ze[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),E.each(["height","width"],(function(e,t){E.cssHooks[t]={get:function(e,n,r){if(n)return!Qe.test(E.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?nt(e,t,r):$e(e,Ke,(function(){return nt(e,t,r)}))},set:function(e,n,r){var i,o=Fe(e),a=!v.scrollboxSize()&&"absolute"===o.position,s=(a||r)&&"border-box"===E.css(e,"boxSizing",!1,o),u=r?tt(e,t,r,s,o):0;return s&&a&&(u-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(o[t])-tt(e,t,"border",!1,o)-.5)),u&&(i=ie.exec(n))&&"px"!==(i[3]||"px")&&(e.style[t]=n,n=E.css(e,t)),et(0,n,u)}}})),E.cssHooks.marginLeft=Ue(v.reliableMarginLeft,(function(e,t){if(t)return(parseFloat(ze(e,"marginLeft"))||e.getBoundingClientRect().left-$e(e,{marginLeft:0},(function(){return e.getBoundingClientRect().left})))+"px"})),E.each({margin:"",padding:"",border:"Width"},(function(e,t){E.cssHooks[e+t]={expand:function(n){for(var r=0,i={},o="string"==typeof n?n.split(" "):[n];r<4;r++)i[e+oe[r]+t]=o[r]||o[r-2]||o[0];return i}},"margin"!==e&&(E.cssHooks[e+t].set=et)})),E.fn.extend({css:function(e,t){return U(this,(function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Fe(e),i=t.length;a1)}}),E.Tween=rt,rt.prototype={constructor:rt,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||E.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(E.cssNumber[n]?"":"px")},cur:function(){var e=rt.propHooks[this.prop];return e&&e.get?e.get(this):rt.propHooks._default.get(this)},run:function(e){var t,n=rt.propHooks[this.prop];return this.options.duration?this.pos=t=E.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rt.propHooks._default.set(this),this}},rt.prototype.init.prototype=rt.prototype,rt.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=E.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){E.fx.step[e.prop]?E.fx.step[e.prop](e):1!==e.elem.nodeType||!E.cssHooks[e.prop]&&null==e.elem.style[Ge(e.prop)]?e.elem[e.prop]=e.now:E.style(e.elem,e.prop,e.now+e.unit)}}},rt.propHooks.scrollTop=rt.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},E.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},E.fx=rt.prototype.init,E.fx.step={};var it,ot,at=/^(?:toggle|show|hide)$/,st=/queueHooks$/;function ut(){ot&&(!1===x.hidden&&r.requestAnimationFrame?r.requestAnimationFrame(ut):r.setTimeout(ut,E.fx.interval),E.fx.tick())}function lt(){return r.setTimeout((function(){it=void 0})),it=Date.now()}function ct(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=oe[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function ft(e,t,n){for(var r,i=(pt.tweeners[t]||[]).concat(pt.tweeners["*"]),o=0,a=i.length;o1)},removeAttr:function(e){return this.each((function(){E.removeAttr(this,e)}))}}),E.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return void 0===e.getAttribute?E.prop(e,t,n):(1===o&&E.isXMLDoc(e)||(i=E.attrHooks[t.toLowerCase()]||(E.expr.match.bool.test(t)?dt:void 0)),void 0!==n?null===n?void E.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=E.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!v.radioValue&&"radio"===t&&D(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(I);if(i&&1===e.nodeType)for(;n=i[r++];)e.removeAttribute(n)}}),dt={set:function(e,t,n){return!1===t?E.removeAttr(e,n):e.setAttribute(n,n),n}},E.each(E.expr.match.bool.source.match(/\w+/g),(function(e,t){var n=ht[t]||E.find.attr;ht[t]=function(e,t,r){var i,o,a=t.toLowerCase();return r||(o=ht[a],ht[a]=i,i=null!=n(e,t,r)?a:null,ht[a]=o),i}}));var gt=/^(?:input|select|textarea|button)$/i,vt=/^(?:a|area)$/i;function mt(e){return(e.match(I)||[]).join(" ")}function yt(e){return e.getAttribute&&e.getAttribute("class")||""}function xt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(I)||[]}E.fn.extend({prop:function(e,t){return U(this,E.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each((function(){delete this[E.propFix[e]||e]}))}}),E.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&E.isXMLDoc(e)||(t=E.propFix[t]||t,i=E.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=E.find.attr(e,"tabindex");return t?parseInt(t,10):gt.test(e.nodeName)||vt.test(e.nodeName)&&e.href?0:-1}}},propFix:{for:"htmlFor",class:"className"}}),v.optSelected||(E.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),E.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],(function(){E.propFix[this.toLowerCase()]=this})),E.fn.extend({addClass:function(e){var t,n,r,i,o,a,s,u=0;if(m(e))return this.each((function(t){E(this).addClass(e.call(this,t,yt(this)))}));if((t=xt(e)).length)for(;n=this[u++];)if(i=yt(n),r=1===n.nodeType&&" "+mt(i)+" "){for(a=0;o=t[a++];)r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=mt(r))&&n.setAttribute("class",s)}return this},removeClass:function(e){var t,n,r,i,o,a,s,u=0;if(m(e))return this.each((function(t){E(this).removeClass(e.call(this,t,yt(this)))}));if(!arguments.length)return this.attr("class","");if((t=xt(e)).length)for(;n=this[u++];)if(i=yt(n),r=1===n.nodeType&&" "+mt(i)+" "){for(a=0;o=t[a++];)for(;r.indexOf(" "+o+" ")>-1;)r=r.replace(" "+o+" "," ");i!==(s=mt(r))&&n.setAttribute("class",s)}return this},toggleClass:function(e,t){var n=typeof e,r="string"===n||Array.isArray(e);return"boolean"==typeof t&&r?t?this.addClass(e):this.removeClass(e):m(e)?this.each((function(n){E(this).toggleClass(e.call(this,n,yt(this),t),t)})):this.each((function(){var t,i,o,a;if(r)for(i=0,o=E(this),a=xt(e);t=a[i++];)o.hasClass(t)?o.removeClass(t):o.addClass(t);else void 0!==e&&"boolean"!==n||((t=yt(this))&&K.set(this,"__className__",t),this.setAttribute&&this.setAttribute("class",t||!1===e?"":K.get(this,"__className__")||""))}))},hasClass:function(e){var t,n,r=0;for(t=" "+e+" ";n=this[r++];)if(1===n.nodeType&&(" "+mt(yt(n))+" ").indexOf(t)>-1)return!0;return!1}});var bt=/\r/g;E.fn.extend({val:function(e){var t,n,r,i=this[0];return arguments.length?(r=m(e),this.each((function(n){var i;1===this.nodeType&&(null==(i=r?e.call(this,n,E(this).val()):e)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=E.map(i,(function(e){return null==e?"":e+""}))),(t=E.valHooks[this.type]||E.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,i,"value")||(this.value=i))}))):i?(t=E.valHooks[i.type]||E.valHooks[i.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(bt,""):null==n?"":n:void 0}}),E.extend({valHooks:{option:{get:function(e){var t=E.find.attr(e,"value");return null!=t?t:mt(E.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r-1)&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),E.each(["radio","checkbox"],(function(){E.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=E.inArray(E(e).val(),t)>-1}},v.checkOn||(E.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})})),v.focusin="onfocusin"in r;var wt=/^(?:focusinfocus|focusoutblur)$/,Tt=function(e){e.stopPropagation()};E.extend(E.event,{trigger:function(e,t,n,i){var o,a,s,u,l,c,f,p,h=[n||x],g=d.call(e,"type")?e.type:e,v=d.call(e,"namespace")?e.namespace.split("."):[];if(a=p=s=n=n||x,3!==n.nodeType&&8!==n.nodeType&&!wt.test(g+E.event.triggered)&&(g.indexOf(".")>-1&&(v=g.split("."),g=v.shift(),v.sort()),l=g.indexOf(":")<0&&"on"+g,(e=e[E.expando]?e:new E.Event(g,"object"==typeof e&&e)).isTrigger=i?2:3,e.namespace=v.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+v.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:E.makeArray(t,[e]),f=E.event.special[g]||{},i||!f.trigger||!1!==f.trigger.apply(n,t))){if(!i&&!f.noBubble&&!y(n)){for(u=f.delegateType||g,wt.test(u+g)||(a=a.parentNode);a;a=a.parentNode)h.push(a),s=a;s===(n.ownerDocument||x)&&h.push(s.defaultView||s.parentWindow||r)}for(o=0;(a=h[o++])&&!e.isPropagationStopped();)p=a,e.type=o>1?u:f.bindType||g,(c=(K.get(a,"events")||Object.create(null))[e.type]&&K.get(a,"handle"))&&c.apply(a,t),(c=l&&a[l])&&c.apply&&Q(a)&&(e.result=c.apply(a,t),!1===e.result&&e.preventDefault());return e.type=g,i||e.isDefaultPrevented()||f._default&&!1!==f._default.apply(h.pop(),t)||!Q(n)||l&&m(n[g])&&!y(n)&&((s=n[l])&&(n[l]=null),E.event.triggered=g,e.isPropagationStopped()&&p.addEventListener(g,Tt),n[g](),e.isPropagationStopped()&&p.removeEventListener(g,Tt),E.event.triggered=void 0,s&&(n[l]=s)),e.result}},simulate:function(e,t,n){var r=E.extend(new E.Event,n,{type:e,isSimulated:!0});E.event.trigger(r,null,t)}}),E.fn.extend({trigger:function(e,t){return this.each((function(){E.event.trigger(e,t,this)}))},triggerHandler:function(e,t){var n=this[0];if(n)return E.event.trigger(e,t,n,!0)}}),v.focusin||E.each({focus:"focusin",blur:"focusout"},(function(e,t){var n=function(e){E.event.simulate(t,e.target,E.event.fix(e))};E.event.special[t]={setup:function(){var r=this.ownerDocument||this.document||this,i=K.access(r,t);i||r.addEventListener(e,n,!0),K.access(r,t,(i||0)+1)},teardown:function(){var r=this.ownerDocument||this.document||this,i=K.access(r,t)-1;i?K.access(r,t,i):(r.removeEventListener(e,n,!0),K.remove(r,t))}}}));var Ct=r.location,Et={guid:Date.now()},St=/\?/;E.parseXML=function(e){var t,n;if(!e||"string"!=typeof e)return null;try{t=(new r.DOMParser).parseFromString(e,"text/xml")}catch(e){}return n=t&&t.getElementsByTagName("parsererror")[0],t&&!n||E.error("Invalid XML: "+(n?E.map(n.childNodes,(function(e){return e.textContent})).join("\n"):e)),t};var kt=/\[\]$/,At=/\r?\n/g,Nt=/^(?:submit|button|image|reset|file)$/i,jt=/^(?:input|select|textarea|keygen)/i;function Dt(e,t,n,r){var i;if(Array.isArray(t))E.each(t,(function(t,i){n||kt.test(e)?r(e,i):Dt(e+"["+("object"==typeof i&&null!=i?t:"")+"]",i,n,r)}));else if(n||"object"!==T(t))r(e,t);else for(i in t)Dt(e+"["+i+"]",t[i],n,r)}E.param=function(e,t){var n,r=[],i=function(e,t){var n=m(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!E.isPlainObject(e))E.each(e,(function(){i(this.name,this.value)}));else for(n in e)Dt(n,e[n],t,i);return r.join("&")},E.fn.extend({serialize:function(){return E.param(this.serializeArray())},serializeArray:function(){return this.map((function(){var e=E.prop(this,"elements");return e?E.makeArray(e):this})).filter((function(){var e=this.type;return this.name&&!E(this).is(":disabled")&&jt.test(this.nodeName)&&!Nt.test(e)&&(this.checked||!ve.test(e))})).map((function(e,t){var n=E(this).val();return null==n?null:Array.isArray(n)?E.map(n,(function(e){return{name:t.name,value:e.replace(At,"\r\n")}})):{name:t.name,value:n.replace(At,"\r\n")}})).get()}});var Lt=/%20/g,qt=/#.*$/,Ht=/([?&])_=[^&]*/,Ot=/^(.*?):[ \t]*([^\r\n]*)$/gm,Pt=/^(?:GET|HEAD)$/,Mt=/^\/\//,Rt={},It={},Wt="*/".concat("*"),Bt=x.createElement("a");function Ft(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(I)||[];if(m(n))for(;r=o[i++];)"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function $t(e,t,n,r){var i={},o=e===It;function a(s){var u;return i[s]=!0,E.each(e[s]||[],(function(e,s){var l=s(t,n,r);return"string"!=typeof l||o||i[l]?o?!(u=l):void 0:(t.dataTypes.unshift(l),a(l),!1)})),u}return a(t.dataTypes[0])||!i["*"]&&a("*")}function _t(e,t){var n,r,i=E.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&E.extend(!0,e,r),e}Bt.href=Ct.href,E.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Ct.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(Ct.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Wt,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":E.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?_t(_t(e,E.ajaxSettings),t):_t(E.ajaxSettings,e)},ajaxPrefilter:Ft(Rt),ajaxTransport:Ft(It),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var n,i,o,a,s,u,l,c,f,p,d=E.ajaxSetup({},t),h=d.context||d,g=d.context&&(h.nodeType||h.jquery)?E(h):E.event,v=E.Deferred(),m=E.Callbacks("once memory"),y=d.statusCode||{},b={},w={},T="canceled",C={readyState:0,getResponseHeader:function(e){var t;if(l){if(!a)for(a={};t=Ot.exec(o);)a[t[1].toLowerCase()+" "]=(a[t[1].toLowerCase()+" "]||[]).concat(t[2]);t=a[e.toLowerCase()+" "]}return null==t?null:t.join(", ")},getAllResponseHeaders:function(){return l?o:null},setRequestHeader:function(e,t){return null==l&&(e=w[e.toLowerCase()]=w[e.toLowerCase()]||e,b[e]=t),this},overrideMimeType:function(e){return null==l&&(d.mimeType=e),this},statusCode:function(e){var t;if(e)if(l)C.always(e[C.status]);else for(t in e)y[t]=[y[t],e[t]];return this},abort:function(e){var t=e||T;return n&&n.abort(t),S(0,t),this}};if(v.promise(C),d.url=((e||d.url||Ct.href)+"").replace(Mt,Ct.protocol+"//"),d.type=t.method||t.type||d.method||d.type,d.dataTypes=(d.dataType||"*").toLowerCase().match(I)||[""],null==d.crossDomain){u=x.createElement("a");try{u.href=d.url,u.href=u.href,d.crossDomain=Bt.protocol+"//"+Bt.host!=u.protocol+"//"+u.host}catch(e){d.crossDomain=!0}}if(d.data&&d.processData&&"string"!=typeof d.data&&(d.data=E.param(d.data,d.traditional)),$t(Rt,d,t,C),l)return C;for(f in(c=E.event&&d.global)&&0==E.active++&&E.event.trigger("ajaxStart"),d.type=d.type.toUpperCase(),d.hasContent=!Pt.test(d.type),i=d.url.replace(qt,""),d.hasContent?d.data&&d.processData&&0===(d.contentType||"").indexOf("application/x-www-form-urlencoded")&&(d.data=d.data.replace(Lt,"+")):(p=d.url.slice(i.length),d.data&&(d.processData||"string"==typeof d.data)&&(i+=(St.test(i)?"&":"?")+d.data,delete d.data),!1===d.cache&&(i=i.replace(Ht,"$1"),p=(St.test(i)?"&":"?")+"_="+Et.guid+++p),d.url=i+p),d.ifModified&&(E.lastModified[i]&&C.setRequestHeader("If-Modified-Since",E.lastModified[i]),E.etag[i]&&C.setRequestHeader("If-None-Match",E.etag[i])),(d.data&&d.hasContent&&!1!==d.contentType||t.contentType)&&C.setRequestHeader("Content-Type",d.contentType),C.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+("*"!==d.dataTypes[0]?", "+Wt+"; q=0.01":""):d.accepts["*"]),d.headers)C.setRequestHeader(f,d.headers[f]);if(d.beforeSend&&(!1===d.beforeSend.call(h,C,d)||l))return C.abort();if(T="abort",m.add(d.complete),C.done(d.success),C.fail(d.error),n=$t(It,d,t,C)){if(C.readyState=1,c&&g.trigger("ajaxSend",[C,d]),l)return C;d.async&&d.timeout>0&&(s=r.setTimeout((function(){C.abort("timeout")}),d.timeout));try{l=!1,n.send(b,S)}catch(e){if(l)throw e;S(-1,e)}}else S(-1,"No Transport");function S(e,t,a,u){var f,p,x,b,w,T=t;l||(l=!0,s&&r.clearTimeout(s),n=void 0,o=u||"",C.readyState=e>0?4:0,f=e>=200&&e<300||304===e,a&&(b=function(e,t,n){for(var r,i,o,a,s=e.contents,u=e.dataTypes;"*"===u[0];)u.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}(d,C,a)),!f&&E.inArray("script",d.dataTypes)>-1&&E.inArray("json",d.dataTypes)<0&&(d.converters["text script"]=function(){}),b=function(e,t,n,r){var i,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];for(o=c.shift();o;)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(i in l)if((s=i.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[i]:!0!==l[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e.throws)t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}(d,b,C,f),f?(d.ifModified&&((w=C.getResponseHeader("Last-Modified"))&&(E.lastModified[i]=w),(w=C.getResponseHeader("etag"))&&(E.etag[i]=w)),204===e||"HEAD"===d.type?T="nocontent":304===e?T="notmodified":(T=b.state,p=b.data,f=!(x=b.error))):(x=T,!e&&T||(T="error",e<0&&(e=0))),C.status=e,C.statusText=(t||T)+"",f?v.resolveWith(h,[p,T,C]):v.rejectWith(h,[C,T,x]),C.statusCode(y),y=void 0,c&&g.trigger(f?"ajaxSuccess":"ajaxError",[C,d,f?p:x]),m.fireWith(h,[C,T]),c&&(g.trigger("ajaxComplete",[C,d]),--E.active||E.event.trigger("ajaxStop")))}return C},getJSON:function(e,t,n){return E.get(e,t,n,"json")},getScript:function(e,t){return E.get(e,void 0,t,"script")}}),E.each(["get","post"],(function(e,t){E[t]=function(e,n,r,i){return m(n)&&(i=i||r,r=n,n=void 0),E.ajax(E.extend({url:e,type:t,dataType:i,data:n,success:r},E.isPlainObject(e)&&e))}})),E.ajaxPrefilter((function(e){var t;for(t in e.headers)"content-type"===t.toLowerCase()&&(e.contentType=e.headers[t]||"")})),E._evalUrl=function(e,t,n){return E.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,converters:{"text script":function(){}},dataFilter:function(e){E.globalEval(e,t,n)}})},E.fn.extend({wrapAll:function(e){var t;return this[0]&&(m(e)&&(e=e.call(this[0])),t=E(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map((function(){for(var e=this;e.firstElementChild;)e=e.firstElementChild;return e})).append(this)),this},wrapInner:function(e){return m(e)?this.each((function(t){E(this).wrapInner(e.call(this,t))})):this.each((function(){var t=E(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)}))},wrap:function(e){var t=m(e);return this.each((function(n){E(this).wrapAll(t?e.call(this,n):e)}))},unwrap:function(e){return this.parent(e).not("body").each((function(){E(this).replaceWith(this.childNodes)})),this}}),E.expr.pseudos.hidden=function(e){return!E.expr.pseudos.visible(e)},E.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},E.ajaxSettings.xhr=function(){try{return new r.XMLHttpRequest}catch(e){}};var zt={0:200,1223:204},Ut=E.ajaxSettings.xhr();v.cors=!!Ut&&"withCredentials"in Ut,v.ajax=Ut=!!Ut,E.ajaxTransport((function(e){var t,n;if(v.cors||Ut&&!e.crossDomain)return{send:function(i,o){var a,s=e.xhr();if(s.open(e.type,e.url,e.async,e.username,e.password),e.xhrFields)for(a in e.xhrFields)s[a]=e.xhrFields[a];for(a in e.mimeType&&s.overrideMimeType&&s.overrideMimeType(e.mimeType),e.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest"),i)s.setRequestHeader(a,i[a]);t=function(e){return function(){t&&(t=n=s.onload=s.onerror=s.onabort=s.ontimeout=s.onreadystatechange=null,"abort"===e?s.abort():"error"===e?"number"!=typeof s.status?o(0,"error"):o(s.status,s.statusText):o(zt[s.status]||s.status,s.statusText,"text"!==(s.responseType||"text")||"string"!=typeof s.responseText?{binary:s.response}:{text:s.responseText},s.getAllResponseHeaders()))}},s.onload=t(),n=s.onerror=s.ontimeout=t("error"),void 0!==s.onabort?s.onabort=n:s.onreadystatechange=function(){4===s.readyState&&r.setTimeout((function(){t&&n()}))},t=t("abort");try{s.send(e.hasContent&&e.data||null)}catch(e){if(t)throw e}},abort:function(){t&&t()}}})),E.ajaxPrefilter((function(e){e.crossDomain&&(e.contents.script=!1)})),E.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return E.globalEval(e),e}}}),E.ajaxPrefilter("script",(function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")})),E.ajaxTransport("script",(function(e){var t,n;if(e.crossDomain||e.scriptAttrs)return{send:function(r,i){t=E("