wj-elements 0.2.0-alpha.13 → 0.2.0-alpha.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/dark.css CHANGED
@@ -165,6 +165,9 @@
165
165
  --wje-card-color: var(--wje-color-white);
166
166
  --wje-card-border-color: transparent;
167
167
 
168
+ /* Dialog */
169
+ --wje-dialog-background: var(--wje-color-contrast-1);
170
+
168
171
  /* Divider */
169
172
  --wje-divider-border-color: var(--wje-border-color);
170
173
 
@@ -232,6 +235,9 @@
232
235
  --wje-orgchart-item-boss-border: 1px solid var(--wje-border-color);
233
236
  --wje-orgchart-item-hover-border: 1px solid var(--wje-color-danger-3);
234
237
 
238
+ /* Popup */
239
+ --wje-popup-overlay-background: var(--wje-color-contrast-0);
240
+
235
241
  /* Rate */
236
242
  --wje-rate-color: var(--wje-color-contrast-11);
237
243
  --wje-rate-selected-color: var(--wje-color-danger-6);
package/dist/light.css CHANGED
@@ -359,6 +359,7 @@
359
359
  --wje-chip-padding-inline: var(--wje-spacing-small);
360
360
 
361
361
  /* Dialog */
362
+ --wje-dialog-background: var(--wje-color-contrast-1);
362
363
  --wje-dialog-width: 600px;
363
364
  --wje-dialog-height: 600px;
364
365
  --wje-dialog-border-radius: var(--wje-border-radius-medium);
@@ -563,6 +564,9 @@
563
564
  --wje-orgchart-group-height-line: 10px;
564
565
  --wje-orgchart-group-padding: 0.25rem 0;
565
566
 
567
+ /* Popup */
568
+ --wje-popup-overlay-background: var(--wje-color-contrast-0);
569
+
566
570
  /* Radio */
567
571
  --wje-radio-margin-top: 0;
568
572
  --wje-radio-margin-bottom: 0.5rem;
package/dist/localize.js CHANGED
@@ -42,9 +42,11 @@ class LocalizerDefault {
42
42
  * @returns {string} The translated string, adapted to the pluralization rules and count.
43
43
  */
44
44
  translatePlural(key, count = 0, type = "cardinal") {
45
- const plural = new Intl.PluralRules(this.lang, { type });
46
- if (count !== void 0) key += "." + plural.select(count);
47
- return this.translate(key);
45
+ const plural = new Intl.PluralRules(this.currentLang, { type });
46
+ const k = `${key}.${plural.select(count)}`;
47
+ const t = this.translate(k);
48
+ if (t !== k) return t;
49
+ return this.translate(`${key}.other`);
48
50
  }
49
51
  /**
50
52
  * Formats a number according to the specified locale and formatting options.
@@ -1 +1 @@
1
- {"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n constructor(element) {\n this.element = element;\n\n this.lang = this.element?.lang || document.documentElement?.lang || 'en-GB';\n this.dir = this.element?.dir || document.documentElement?.dir || 'ltr';\n this.currentLang = 'en-GB';\n\n this.setLanguage();\n }\n\n get languages() {\n return window.translations;\n }\n\n // Nastavenie aktuálneho jazyka\n setLanguage() {\n if (this.languages?.has(this.lang)) {\n this.currentLang = this.lang;\n } else {\n console.error(`Language \"${this.lang}\" not loaded.`);\n }\n }\n\n convertLangCode = (lang) => lang.replace(\"-\", \"_\").replace(/_([a-z]{2})$/, (_, code) => `_${code.toUpperCase()}`);\n\n /**\n * Translates a given translation key based on the currently selected language.\n * @param {string} key The key representing the text to be translated.\n * @returns {string} The translated text if available; otherwise, returns the original key.\n */\n translate(key) {\n const langMap = this.languages?.get(this.currentLang);\n if (!langMap) return key;\n return langMap ? langMap[key] || key : key;\n }\n\n /**\n * Translates a key into a localized string based on the provided count and pluralization type.\n * @param {string} key The base translation key to be used for fetching the localized string.\n * @param {number} [count=0] The count value used to determine the pluralization form.\n * @param {string} [type='cardinal'] The type of pluralization to use, such as 'cardinal' or 'ordinal'.\n * @returns {string} The translated string, adapted to the pluralization rules and count.\n */\n translatePlural(key, count = 0, type = 'cardinal') {\n const plural = new Intl.PluralRules(this.lang, { type: type });\n\n if (count !== undefined) key += '.' + plural.select(count);\n\n return this.translate(key);\n }\n\n /**\n * Formats a number according to the specified locale and formatting options.\n * @param {number} number The numeric value to format.\n * @param {object} options An object containing formatting options for the number.\n * @returns {string} The formatted number as a string.\n */\n formatNumber(number, options) {\n return new Intl.NumberFormat(this.currentLang, options).format(number);\n }\n\n /**\n * Formats a given date based on the specified options and the current language setting.\n * @param {string|Date|number} date The date to format. Can be a Date object, a timestamp, or a date string.\n * @param {object} options The formatting options to customize the output, as supported by Intl.DateTimeFormat.\n * @returns {string} The formatted date string based on the specified options and current language.\n */\n formatDate(date, options) {\n return new Intl.DateTimeFormat(this.currentLang, options).format(new Date(date));\n }\n\n /**\n * Formats a relative time string based on a given language, value, unit, and formatting options.\n * @param {string} lang The language to use for formatting. Defaults to `this.currentLang` if not provided.\n * @param {number} value The numerical value to format, representing the time difference.\n * @param {string} [unit] The unit of time to use (e.g., \"second\", \"minute\", \"hour\", \"day\", \"week\", \"month\", \"year\").\n * @param {object} [options] An object containing formatting options, such as the style for the numeric representation.\n * @returns {string} The formatted relative time string in the specified language.\n */\n relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n lang = lang || this.currentLang;\n return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n }\n}\n\nexport function registerTranslation(...translation) {\n translation.forEach((t) => {\n if (!t.code) {\n console.error(\"Translation object is missing 'code' property:\", t);\n return;\n }\n\n const code = t.code.toLowerCase();\n if (window.translations.has(code)) {\n window.translations.set(code, { ...window.translations.get(code), ...t });\n } else {\n window.translations.set(code, t);\n }\n });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n constructor(element) {\n super(element);\n }\n static registerTranslation(...translation) {\n registerTranslation(...translation);\n }\n}\n"],"names":[],"mappings":";;;AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AAuBrB,2CAAkB,CAAC,SAAS,KAAK,QAAQ,KAAK,GAAG,EAAE,QAAQ,gBAAgB,CAAC,GAAG,SAAS,IAAI,KAAK,YAAa,CAAA,EAAE;AA1BpH;AAIQ,SAAK,UAAU;AAEf,SAAK,SAAO,UAAK,YAAL,mBAAc,WAAQ,cAAS,oBAAT,mBAA0B,SAAQ;AACpE,SAAK,QAAM,UAAK,YAAL,mBAAc,UAAO,cAAS,oBAAT,mBAA0B,QAAO;AACjE,SAAK,cAAc;AAEnB,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AAlBlB;AAmBQ,SAAI,UAAK,cAAL,mBAAgB,IAAI,KAAK,OAAO;AAChC,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,UAAU,KAAK;AAjCnB;AAkCQ,UAAM,WAAU,UAAK,cAAL,mBAAgB,IAAI,KAAK;AACzC,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,MAAM,EAAE,MAAY;AAE7D,QAAI,UAAU,OAAW,QAAO,MAAM,OAAO,OAAO,KAAK;AAEzD,WAAO,KAAK,UAAU,GAAG;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,WAAW,MAAM,SAAS;AACtB,WAAO,IAAI,KAAK,eAAe,KAAK,aAAa,OAAO,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EACvF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACpGO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}
1
+ {"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n constructor(element) {\n this.element = element;\n\n this.lang = this.element?.lang || document.documentElement?.lang || 'en-GB';\n this.dir = this.element?.dir || document.documentElement?.dir || 'ltr';\n this.currentLang = 'en-GB';\n\n this.setLanguage();\n }\n\n get languages() {\n return window.translations;\n }\n\n // Nastavenie aktuálneho jazyka\n setLanguage() {\n if (this.languages?.has(this.lang)) {\n this.currentLang = this.lang;\n } else {\n console.error(`Language \"${this.lang}\" not loaded.`);\n }\n }\n\n convertLangCode = (lang) => lang.replace(\"-\", \"_\").replace(/_([a-z]{2})$/, (_, code) => `_${code.toUpperCase()}`);\n\n /**\n * Translates a given translation key based on the currently selected language.\n * @param {string} key The key representing the text to be translated.\n * @returns {string} The translated text if available; otherwise, returns the original key.\n */\n translate(key) {\n const langMap = this.languages?.get(this.currentLang);\n if (!langMap) return key;\n return langMap ? langMap[key] || key : key;\n }\n\n /**\n * Translates a key into a localized string based on the provided count and pluralization type.\n * @param {string} key The base translation key to be used for fetching the localized string.\n * @param {number} [count=0] The count value used to determine the pluralization form.\n * @param {string} [type='cardinal'] The type of pluralization to use, such as 'cardinal' or 'ordinal'.\n * @returns {string} The translated string, adapted to the pluralization rules and count.\n */\n translatePlural(key, count = 0, type = 'cardinal') {\n const plural = new Intl.PluralRules(this.currentLang, { type });\n const k = `${key}.${plural.select(count)}`;\n const t = this.translate(k);\n if (t !== k) return t;\n return this.translate(`${key}.other`);\n }\n\n /**\n * Formats a number according to the specified locale and formatting options.\n * @param {number} number The numeric value to format.\n * @param {object} options An object containing formatting options for the number.\n * @returns {string} The formatted number as a string.\n */\n formatNumber(number, options) {\n return new Intl.NumberFormat(this.currentLang, options).format(number);\n }\n\n /**\n * Formats a given date based on the specified options and the current language setting.\n * @param {string|Date|number} date The date to format. Can be a Date object, a timestamp, or a date string.\n * @param {object} options The formatting options to customize the output, as supported by Intl.DateTimeFormat.\n * @returns {string} The formatted date string based on the specified options and current language.\n */\n formatDate(date, options) {\n return new Intl.DateTimeFormat(this.currentLang, options).format(new Date(date));\n }\n\n /**\n * Formats a relative time string based on a given language, value, unit, and formatting options.\n * @param {string} lang The language to use for formatting. Defaults to `this.currentLang` if not provided.\n * @param {number} value The numerical value to format, representing the time difference.\n * @param {string} [unit] The unit of time to use (e.g., \"second\", \"minute\", \"hour\", \"day\", \"week\", \"month\", \"year\").\n * @param {object} [options] An object containing formatting options, such as the style for the numeric representation.\n * @returns {string} The formatted relative time string in the specified language.\n */\n relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n lang = lang || this.currentLang;\n return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n }\n}\n\nexport function registerTranslation(...translation) {\n translation.forEach((t) => {\n if (!t.code) {\n console.error(\"Translation object is missing 'code' property:\", t);\n return;\n }\n\n const code = t.code.toLowerCase();\n if (window.translations.has(code)) {\n window.translations.set(code, { ...window.translations.get(code), ...t });\n } else {\n window.translations.set(code, t);\n }\n });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n constructor(element) {\n super(element);\n }\n static registerTranslation(...translation) {\n registerTranslation(...translation);\n }\n}\n"],"names":[],"mappings":";;;AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AAuBrB,2CAAkB,CAAC,SAAS,KAAK,QAAQ,KAAK,GAAG,EAAE,QAAQ,gBAAgB,CAAC,GAAG,SAAS,IAAI,KAAK,YAAa,CAAA,EAAE;AA1BpH;AAIQ,SAAK,UAAU;AAEf,SAAK,SAAO,UAAK,YAAL,mBAAc,WAAQ,cAAS,oBAAT,mBAA0B,SAAQ;AACpE,SAAK,QAAM,UAAK,YAAL,mBAAc,UAAO,cAAS,oBAAT,mBAA0B,QAAO;AACjE,SAAK,cAAc;AAEnB,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AAlBlB;AAmBQ,SAAI,UAAK,cAAL,mBAAgB,IAAI,KAAK,OAAO;AAChC,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,UAAU,KAAK;AAjCnB;AAkCQ,UAAM,WAAU,UAAK,cAAL,mBAAgB,IAAI,KAAK;AACzC,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,aAAa,EAAE,MAAM;AAC9D,UAAM,IAAI,GAAG,GAAG,IAAI,OAAO,OAAO,KAAK,CAAC;AACxC,UAAM,IAAI,KAAK,UAAU,CAAC;AAC1B,QAAI,MAAM,EAAG,QAAO;AACpB,WAAO,KAAK,UAAU,GAAG,GAAG,QAAQ;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,WAAW,MAAM,SAAS;AACtB,WAAO,IAAI,KAAK,eAAe,KAAK,aAAa,OAAO,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EACvF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACpGO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}
@@ -1371,7 +1371,7 @@ const computePosition = (reference, floating, options) => {
1371
1371
  platform: platformWithCache
1372
1372
  });
1373
1373
  };
1374
- const styles = "/*\n[ WJ Popup ]\n*/\n\n:host {\n --wje-popup-top: auto;\n --wje-popup-left: auto;\n display: flex; /* zmenene z contents na flex kvoli breadcrumbs v a jeho trom bodkam */\n}\n\n.native-popup {\n position: absolute;\n isolation: isolate;\n z-index: 999;\n left: var(--wje-popup-left);\n top: var(--wje-popup-top);\n}\n.native-popup:not(.popup-active) {\n display: none;\n}\n\n.popup-loader.overlay {\n position: absolute;\n inset: 1px;\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.popup-loader.fade-out {\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}";
1374
+ const styles = "/*\n[ WJ Popup ]\n*/\n\n:host {\n --wje-popup-top: auto;\n --wje-popup-left: auto;\n\n display: flex; /* zmenene z contents na flex kvoli breadcrumbs v a jeho trom bodkam */\n}\n\n.native-popup {\n position: absolute;\n isolation: isolate;\n z-index: 999;\n left: var(--wje-popup-left);\n top: var(--wje-popup-top);\n}\n.native-popup:not(.popup-active) {\n display: none;\n}\n\n.popup-loader.overlay {\n position: absolute;\n inset: 1px;\n background: var(--wje-popup-overlay-background);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.popup-loader.fade-out {\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}";
1375
1375
  class Popup extends WJElement {
1376
1376
  /**
1377
1377
  * Creates an instance of Popup.
@@ -1865,4 +1865,4 @@ class Popup extends WJElement {
1865
1865
  export {
1866
1866
  Popup as P
1867
1867
  };
1868
- //# sourceMappingURL=popup.element-DeajFyOQ.js.map
1868
+ //# sourceMappingURL=popup.element-Cl6QeG8M.js.map