diff --git a/development/issues/closed/276.html b/development/issues/closed/276.html
new file mode 100644
index 0000000000000000000000000000000000000000..0feca5964659f0630090855cfb75a8cdb7b24364
--- /dev/null
+++ b/development/issues/closed/276.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>new locale-picker #276</title>
+ <script src="276.mjs" type="module"></script>
+
+
+ <link hreflang="de" data-monster-label="deutsch" href="/de.html" rel="alternate">
+ <link hreflang="fr" data-monster-label="français" href="/fr.html" rel="alternate">
+
+</head>
+<body>
+ <h1>new locale-picker #276</h1>
+ <p></p>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/276">Issue #276</a></li>
+ <li><a href="/">Back to overview</a></li>
+ </ul>
+ <main>
+
+ <monster-locale-picker
+ style="display:none;position:absolute;left:20px;top:100px;background-color:#210786;border:1px solid white;padding:10px;color:white">
+ </monster-locale-picker>
+
+ </main>
+</body>
+</html>
diff --git a/development/issues/closed/276.mjs b/development/issues/closed/276.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..795c85a492eee13fa82334ae73542c2f338eb4e4
--- /dev/null
+++ b/development/issues/closed/276.mjs
@@ -0,0 +1,16 @@
+/**
+* @file development/issues/open/276.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/276
+* @description new locale-picker
+* @issue 276
+*/
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+
+import "../../../source/components/accessibility/locale-picker.mjs";
+
diff --git a/source/components/style/theme.css b/source/components/style/theme.css
index 6adad892db8d7117663ab917d6cee31aa55163cd..3edf4815f1e324f8f7929d2e40bf43faf8134e6a 100644
--- a/source/components/style/theme.css
+++ b/source/components/style/theme.css
@@ -36,7 +36,7 @@
color: var(--monster-color-selection-1);
}
.monster-border-color-1 {
- border-color: var(--monster-color-primary-4);
+ border-color: var(--monster-color-border-1);
}
.monster-color-neutral-1 {
color: var(--monster-color-primary-1);
@@ -119,7 +119,7 @@
color: var(--monster-color-selection-2);
}
.monster-border-color-2 {
- border-color: var(--monster-color-primary-3);
+ border-color: var(--monster-color-border-2);
}
.monster-color-neutral-2 {
color: var(--monster-color-primary-2);
@@ -202,7 +202,7 @@
color: var(--monster-color-selection-3);
}
.monster-border-color-3 {
- border-color: var(--monster-color-primary-2);
+ border-color: var(--monster-color-border-3);
}
.monster-color-neutral-3 {
color: var(--monster-color-primary-3);
@@ -285,7 +285,7 @@
color: var(--monster-color-selection-4);
}
.monster-border-color-4 {
- border-color: var(--monster-color-primary-1);
+ border-color: var(--monster-color-border-4);
}
.monster-color-neutral-4 {
color: var(--monster-color-primary-4);
diff --git a/source/i18n/locale.mjs b/source/i18n/locale.mjs
index 524c89ec4124f2b4b8ce8579be5ff8b7827af59d..12aa9380853d8fa9d8d8783db690cd1a1f5a2611 100644
--- a/source/i18n/locale.mjs
+++ b/source/i18n/locale.mjs
@@ -12,12 +12,12 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import { instanceSymbol } from "../constants.mjs";
-import { Base } from "../types/base.mjs";
-import { validateString } from "../types/validate.mjs";
-import { clone } from "../util/clone.mjs";
+import {instanceSymbol} from "../constants.mjs";
+import {Base} from "../types/base.mjs";
+import {validateString} from "../types/validate.mjs";
+import {clone} from "../util/clone.mjs";
-export { Locale, parseLocale };
+export {Locale, parseLocale};
/**
* @type {symbol}
@@ -69,116 +69,116 @@ const localeStringSymbol = Symbol("localeString");
* @see https://datatracker.ietf.org/doc/html/rfc3066
*/
class Locale extends Base {
- /**
- * @param {string} language
- * @param {string} [region]
- * @param {string} [script]
- * @param {string} [variants]
- * @param {string} [extlang]
- * @param {string} [privateUse]
- * @throws {Error} unsupported locale
- */
- constructor(language, region, script, variants, extlang, privateUse) {
- super();
+ /**
+ * @param {string} language
+ * @param {string} [region]
+ * @param {string} [script]
+ * @param {string} [variants]
+ * @param {string} [extlang]
+ * @param {string} [privateUse]
+ * @throws {Error} unsupported locale
+ */
+ constructor(language, region, script, variants, extlang, privateUse) {
+ super();
- this[propertiesSymbol] = {
- language: language === undefined ? undefined : validateString(language),
- script: script === undefined ? undefined : validateString(script),
- region: region === undefined ? undefined : validateString(region),
- variants: variants === undefined ? undefined : validateString(variants),
- extlang: extlang === undefined ? undefined : validateString(extlang),
- privateUse:
- privateUse === undefined ? undefined : validateString(privateUse),
- };
+ this[propertiesSymbol] = {
+ language: language === undefined ? undefined : validateString(language),
+ script: script === undefined ? undefined : validateString(script),
+ region: region === undefined ? undefined : validateString(region),
+ variants: variants === undefined ? undefined : validateString(variants),
+ extlang: extlang === undefined ? undefined : validateString(extlang),
+ privateUse:
+ privateUse === undefined ? undefined : validateString(privateUse),
+ };
- const s = [];
- if (language !== undefined) s.push(language);
- if (script !== undefined) s.push(script);
- if (region !== undefined) s.push(region);
- if (variants !== undefined) s.push(variants);
- if (extlang !== undefined) s.push(extlang);
- if (privateUse !== undefined) s.push(privateUse);
+ const s = [];
+ if (language !== undefined) s.push(language);
+ if (script !== undefined) s.push(script);
+ if (region !== undefined) s.push(region);
+ if (variants !== undefined) s.push(variants);
+ if (extlang !== undefined) s.push(extlang);
+ if (privateUse !== undefined) s.push(privateUse);
- if (s.length === 0) {
- throw new Error("unsupported locale");
- }
+ if (s.length === 0) {
+ throw new Error("unsupported locale");
+ }
- this[localeStringSymbol] = s.join("-");
- }
+ this[localeStringSymbol] = s.join("-");
+ }
- /**
- * This method is called by the `instanceof` operator.
- * @return {symbol}
- * @since 3.27.0
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/i18n/locale@@instance");
- }
+ /**
+ * This method is called by the `instanceof` operator.
+ * @return {symbol}
+ * @since 3.27.0
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/i18n/locale@@instance");
+ }
- /**
- * @return {string}
- */
- get localeString() {
- return this[localeStringSymbol];
- }
+ /**
+ * @return {string}
+ */
+ get localeString() {
+ return this[localeStringSymbol];
+ }
- /**
- * @return {string|undefined}
- */
- get language() {
- return this[propertiesSymbol].language;
- }
+ /**
+ * @return {string|undefined}
+ */
+ get language() {
+ return this[propertiesSymbol].language;
+ }
- /**
- * @return {string|undefined}
- */
- get region() {
- return this[propertiesSymbol].region;
- }
+ /**
+ * @return {string|undefined}
+ */
+ get region() {
+ return this[propertiesSymbol].region;
+ }
- /**
- * @return {string|undefined}
- */
- get script() {
- return this[propertiesSymbol].script;
- }
+ /**
+ * @return {string|undefined}
+ */
+ get script() {
+ return this[propertiesSymbol].script;
+ }
- /**
- * @return {string|undefined}
- */
- get variants() {
- return this[propertiesSymbol].variants;
- }
+ /**
+ * @return {string|undefined}
+ */
+ get variants() {
+ return this[propertiesSymbol].variants;
+ }
- /**
- * @return {string|undefined}
- */
- get extlang() {
- return this[propertiesSymbol].extlang;
- }
+ /**
+ * @return {string|undefined}
+ */
+ get extlang() {
+ return this[propertiesSymbol].extlang;
+ }
- /**
- * @return {string|undefined}
- */
- get privateUse() {
- return this[propertiesSymbol].privateValue;
- }
+ /**
+ * @return {string|undefined}
+ */
+ get privateUse() {
+ return this[propertiesSymbol].privateValue;
+ }
- /**
- * @return {string}
- */
- toString() {
- return `${this.localeString}`;
- }
+ /**
+ * @return {string}
+ */
+ toString() {
+ return `${this.localeString}`;
+ }
- /**
- * The structure has the following: language, script, region, variants, extlang, privateUse
- *
- * @return {Monster.I18n.LocaleMap}
- */
- getMap() {
- return clone(this[propertiesSymbol]);
- }
+ /**
+ * The structure has the following: language, script, region, variants, extlang, privateUse
+ *
+ * @return {Monster.I18n.LocaleMap}
+ */
+ getMap() {
+ return clone(this[propertiesSymbol]);
+ }
}
/**
@@ -260,63 +260,63 @@ class Locale extends Base {
* @throws {Error} unsupported locale
*/
function parseLocale(locale) {
- locale = validateString(locale).replace(/_/g, "-");
+ locale = validateString(locale).replace(/_/g, "-");
- let language;
- let region;
- let variants;
- let parts;
- let script;
- let extlang;
- const regexRegular =
- "(art-lojban|cel-gaulish|no-bok|no-nyn|zh-guoyu|zh-hakka|zh-min|zh-min-nan|zh-xiang)";
- const regexIrregular =
- "(en-GB-oed|i-ami|i-bnn|i-default|i-enochian|i-hak|i-klingon|i-lux|i-mingo|i-navajo|i-pwn|i-tao|i-tay|i-tsu|sgn-BE-FR|sgn-BE-NL|sgn-CH-DE)";
- const regexGrandfathered = `(${regexIrregular}|${regexRegular})`;
- const regexPrivateUse = "(x(-[A-Za-z0-9]{1,8})+)";
- const regexSingleton = "[0-9A-WY-Za-wy-z]";
- const regexExtension = `(${regexSingleton}(-[A-Za-z0-9]{2,8})+)`;
- const regexVariant = "([A-Za-z0-9]{5,8}|[0-9][A-Za-z0-9]{3})";
- const regexRegion = "([A-Za-z]{2}|[0-9]{3})";
- const regexScript = "([A-Za-z]{4})";
- const regexExtlang = "([A-Za-z]{3}(-[A-Za-z]{3}){0,2})";
- const regexLanguage = `(([A-Za-z]{2,3}(-${regexExtlang})?)|[A-Za-z]{4}|[A-Za-z]{5,8})`;
- const regexLangtag = `(${regexLanguage}(-${regexScript})?(-${regexRegion})?(-${regexVariant})*(-${regexExtension})*(-${regexPrivateUse})?)`;
- const regexLanguageTag = `^(${regexGrandfathered}|${regexLangtag}|${regexPrivateUse})$`;
- const regex = new RegExp(regexLanguageTag);
- let match;
+ let language;
+ let region;
+ let variants;
+ let parts;
+ let script;
+ let extlang;
+ const regexRegular =
+ "(art-lojban|cel-gaulish|no-bok|no-nyn|zh-guoyu|zh-hakka|zh-min|zh-min-nan|zh-xiang)";
+ const regexIrregular =
+ "(en-GB-oed|i-ami|i-bnn|i-default|i-enochian|i-hak|i-klingon|i-lux|i-mingo|i-navajo|i-pwn|i-tao|i-tay|i-tsu|sgn-BE-FR|sgn-BE-NL|sgn-CH-DE)";
+ const regexGrandfathered = `(${regexIrregular}|${regexRegular})`;
+ const regexPrivateUse = "(x(-[A-Za-z0-9]{1,8})+)";
+ const regexSingleton = "[0-9A-WY-Za-wy-z]";
+ const regexExtension = `(${regexSingleton}(-[A-Za-z0-9]{2,8})+)`;
+ const regexVariant = "([A-Za-z0-9]{5,8}|[0-9][A-Za-z0-9]{3})";
+ const regexRegion = "([A-Za-z]{2}|[0-9]{3})";
+ const regexScript = "([A-Za-z]{4})";
+ const regexExtlang = "([A-Za-z]{3}(-[A-Za-z]{3}){0,2})";
+ const regexLanguage = `(([A-Za-z]{2,3}(-${regexExtlang})?)|[A-Za-z]{4}|[A-Za-z]{5,8})`;
+ const regexLangtag = `(${regexLanguage}(-${regexScript})?(-${regexRegion})?(-${regexVariant})*(-${regexExtension})*(-${regexPrivateUse})?)`;
+ const regexLanguageTag = `^(${regexGrandfathered}|${regexLangtag}|${regexPrivateUse})$`;
+ const regex = new RegExp(regexLanguageTag);
+ let match;
- if ((match = regex.exec(locale)) !== null) {
- if (match.index === regex.lastIndex) {
- regex.lastIndex++;
- }
- }
+ if ((match = regex.exec(locale)) !== null) {
+ if (match.index === regex.lastIndex) {
+ regex.lastIndex++;
+ }
+ }
- if (match === undefined || match === null) {
- throw new Error("unsupported locale");
- }
+ if (match === undefined || match === null) {
+ throw new Error("unsupported locale");
+ }
- if (match[6] !== undefined) {
- language = match[6];
+ if (match[6] !== undefined) {
+ language = match[6];
- parts = language.split("-");
- if (parts.length > 1) {
- language = parts[0];
- extlang = parts[1];
- }
- }
+ parts = language.split("-");
+ if (parts.length > 1) {
+ language = parts[0];
+ extlang = parts[1];
+ }
+ }
- if (match[14] !== undefined) {
- region = match[14];
- }
+ if (match[14] !== undefined) {
+ region = match[14];
+ }
- if (match[12] !== undefined) {
- script = match[12];
- }
+ if (match[12] !== undefined) {
+ script = match[12];
+ }
- if (match[16] !== undefined) {
- variants = match[16];
- }
+ if (match[16] !== undefined) {
+ variants = match[16];
+ }
- return new Locale(language, region, script, variants, extlang);
+ return new Locale(language, region, script, variants, extlang);
}
diff --git a/source/i18n/map/languages.mjs b/source/i18n/map/languages.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..123bb6838e32f80083c3e428b5b3e3696efb3599
--- /dev/null
+++ b/source/i18n/map/languages.mjs
@@ -0,0 +1,104 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+export const languages = {
+ "en": "English",
+ "en-GB": "English (United Kingdom)",
+ "en-US": "English (United States)",
+ "en-CA": "English (Canada)",
+ "en-AU": "English (Australia)",
+ "es": "Español",
+ "es-ES": "Español (España)",
+ "es-MX": "Español (México)",
+ "es-AR": "Español (Argentina)",
+ "zh": "中文",
+ "zh-CN": "中文（简体）",
+ "zh-TW": "中文（繁體）",
+ "zh-HK": "中文（香港）",
+ "fr": "Français",
+ "fr-FR": "Français (France)",
+ "fr-CA": "Français (Canada)",
+ "fr-BE": "Français (Belgique)",
+ "de": "Deutsch",
+ "de-DE": "Deutsch (Deutschland)",
+ "de-AT": "Deutsch (Österreich)",
+ "de-CH": "Deutsch (Schweiz)",
+ "ja": "日本語",
+ "ru": "Русский",
+ "ru-RU": "Русский (Россия)",
+ "it": "Italiano",
+ "it-IT": "Italiano (Italia)",
+ "pt": "Português",
+ "pt-PT": "Português (Portugal)",
+ "pt-BR": "Português (Brasil)",
+ "ko": "한국어",
+ "ar": "العربية",
+ "hi": "हिन्दी",
+ "bn": "বাংলা",
+ "pa": "ਪੰਜਾਬੀ",
+ "id": "Bahasa Indonesia",
+ "vi": "Tiếng Việt",
+ "tr": "Türkçe",
+ "tr-TR": "Türkçe (Türkiye)",
+ "pl": "Polski",
+ "pl-PL": "Polski (Polska)",
+ "uk": "Українська",
+ "uk-UA": "Українська (Україна)",
+ "ro": "Română",
+ "ro-RO": "Română (România)",
+ "nl": "Nederlands",
+ "nl-NL": "Nederlands (Nederland)",
+ "el": "Ελληνικά",
+ "el-GR": "Ελληνικά (Ελλάδα)",
+ "hu": "Magyar",
+ "hu-HU": "Magyar (Magyarország)",
+ "sv": "Svenska",
+ "sv-SE": "Svenska (Sverige)",
+ "cs": "Čeština",
+ "cs-CZ": "Čeština (Česká republika)",
+ "bg": "Български",
+ "bg-BG": "Български (България)",
+ "da": "Dansk",
+ "da-DK": "Dansk (Danmark)",
+ "fi": "Suomi",
+ "fi-FI": "Suomi (Suomi)",
+ "sk": "Slovenčina",
+ "sk-SK": "Slovenčina (Slovensko)",
+ "he": "עברית",
+ "th": "ไทย",
+ "sr": "Српски",
+ "sr-RS": "Српски (Србија)",
+ "no": "Norsk",
+ "no-NO": "Norsk (Norge)",
+ "lt": "Lietuvių",
+ "lt-LT": "Lietuvių (Lietuva)",
+ "lv": "Latviešu",
+ "lv-LV": "Latviešu (Latvija)",
+ "et": "Eesti",
+ "et-EE": "Eesti (Eesti)",
+ "hr": "Hrvatski",
+ "hr-HR": "Hrvatski (Hrvatska)",
+ "sl": "Slovenščina",
+ "sl-SI": "Slovenščina (Slovenija)",
+ "mt": "Malti",
+ "mt-MT": "Malti (Malta)",
+ "is": "Íslenska",
+ "is-IS": "Íslenska (Ísland)",
+ "ga": "Gaeilge",
+ "ga-IE": "Gaeilge (Éire)",
+ "cy": "Cymraeg",
+ "cy-GB": "Cymraeg (Y Deyrnas Unedig)",
+ "sq": "Shqip",
+ "sq-AL": "Shqip (Shqipëria)"
+};