blue-web 1.19.0 → 1.19.1
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/js/odometer.bundle.js +1 -1
- package/dist/js/odometer.d.ts +3 -0
- package/dist/js/odometer.js +39 -11
- package/dist/merged.scss +1 -1
- package/dist/style.css +1 -1
- package/dist/style.min.css +1 -1
- package/dist/style.scss +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";var t={};t.d=(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class e extends HTMLElement{static get observedAttributes(){return["value"]}constructor(){var t,e,n;super(),t=this,n=!1,(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e="_initialized"))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,this.attachShadow({mode:"open"})}connectedCallback(){this._initialized||(this.setup(),this._initialized=!0,this.updateValue(this.value))}setup(){const t=document.createElement("style");t.textContent="\n :host {\n display: inline-flex;\n min-width: 1em;\n height: 1em;\n text-align: center;\n overflow: hidden;\n line-height: 1em;\n transition: background-color 0.3s;\n }\n .numbers {\n display: flex;\n flex-direction: column;\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .numbers span {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1em;\n }";const e=document.createElement("span");e.classList.add("numbers"),e.setAttribute("aria-hidden","true");for(let
|
|
1
|
+
(()=>{"use strict";var t={};t.d=(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class e extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){var t,e,n;super(),t=this,n=!1,(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e="_initialized"))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,this.attachShadow({mode:"open"})}connectedCallback(){this._initialized||(this.setup(),this._initialized=!0,this.updateValue(this.value))}setup(){const t=document.createElement("style");t.textContent="\n :host {\n display: inline-flex;\n min-width: 1em;\n height: 1em;\n text-align: center;\n overflow: hidden;\n line-height: 1em;\n transition: background-color 0.3s;\n }\n .numbers {\n display: flex;\n flex-direction: column;\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .numbers span {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1em;\n }";const e=document.createElement("span");e.classList.add("numbers"),e.setAttribute("aria-hidden","true"),this.shadowRoot.append(t,e),this.wrapper=e,this.rebuildNumbers()}rebuildNumbers(){this.wrapper.innerHTML="";const t=this.max;for(let e=0;e<=t;e++){const t=document.createElement("span");t.textContent=String(e),this.wrapper.appendChild(t)}const e=document.createElement("span");e.textContent="".concat(t,"+"),this.wrapper.appendChild(e),this._initialized&&this.updateValue(this.value)}attributeChangedCallback(t,e,n){n!==e&&this._initialized&&("value"===t?this.updateValue(parseInt(null!=n?n:"0",10)):"max"===t&&this.rebuildNumbers())}updateValue(t){const e=this.max,n=t>e?e+1:Math.max(0,t),i=this.wrapper.getBoundingClientRect().height||16;this.wrapper.style.transform="translateY(-".concat(n*i,"px)");const a=t>e?"".concat(e,"+"):"".concat(t);this.setAttribute("aria-label",a)}set value(t){this.value!==t&&(this.setAttribute("value",String(t)),this._initialized&&(this.updateValue(t),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0}))))}get value(){return parseInt(this.getAttribute("value")||"0",10)||0}set max(t){this.setAttribute("max",String(t))}get max(){return parseInt(this.getAttribute("max")||"9",10)||9}}customElements.get("bl-odometer")||customElements.define("bl-odometer",e)})();
|
package/dist/js/odometer.d.ts
CHANGED
|
@@ -5,10 +5,13 @@ declare class Odometer extends HTMLElement {
|
|
|
5
5
|
constructor();
|
|
6
6
|
connectedCallback(): void;
|
|
7
7
|
private setup;
|
|
8
|
+
private rebuildNumbers;
|
|
8
9
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
9
10
|
private updateValue;
|
|
10
11
|
set value(value: number);
|
|
11
12
|
get value(): number;
|
|
13
|
+
set max(value: number);
|
|
14
|
+
get max(): number;
|
|
12
15
|
}
|
|
13
16
|
export { Odometer };
|
|
14
17
|
export default Odometer;
|
package/dist/js/odometer.js
CHANGED
|
@@ -3,7 +3,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
3
3
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
4
4
|
class Odometer extends HTMLElement {
|
|
5
5
|
static get observedAttributes() {
|
|
6
|
-
return ["value"];
|
|
6
|
+
return ["value", "max"];
|
|
7
7
|
}
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
@@ -26,27 +26,42 @@ class Odometer extends HTMLElement {
|
|
|
26
26
|
const wrapper = document.createElement("span");
|
|
27
27
|
wrapper.classList.add("numbers");
|
|
28
28
|
wrapper.setAttribute("aria-hidden", "true");
|
|
29
|
-
|
|
29
|
+
this.shadowRoot.append(style, wrapper);
|
|
30
|
+
this.wrapper = wrapper;
|
|
31
|
+
this.rebuildNumbers();
|
|
32
|
+
}
|
|
33
|
+
rebuildNumbers() {
|
|
34
|
+
this.wrapper.innerHTML = "";
|
|
35
|
+
const max = this.max;
|
|
36
|
+
for (let i = 0; i <= max; i++) {
|
|
30
37
|
const s = document.createElement("span");
|
|
31
38
|
s.textContent = String(i);
|
|
32
|
-
wrapper.appendChild(s);
|
|
39
|
+
this.wrapper.appendChild(s);
|
|
33
40
|
}
|
|
34
41
|
const plus = document.createElement("span");
|
|
35
|
-
plus.textContent = "
|
|
36
|
-
wrapper.appendChild(plus);
|
|
37
|
-
|
|
38
|
-
|
|
42
|
+
plus.textContent = "".concat(max, "+");
|
|
43
|
+
this.wrapper.appendChild(plus);
|
|
44
|
+
|
|
45
|
+
// Aktuellen Wert neu anwenden
|
|
46
|
+
if (this._initialized) {
|
|
47
|
+
this.updateValue(this.value);
|
|
48
|
+
}
|
|
39
49
|
}
|
|
40
50
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
41
|
-
if (
|
|
42
|
-
|
|
51
|
+
if (newValue !== oldValue && this._initialized) {
|
|
52
|
+
if (name === "value") {
|
|
53
|
+
this.updateValue(parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10));
|
|
54
|
+
} else if (name === "max") {
|
|
55
|
+
this.rebuildNumbers();
|
|
56
|
+
}
|
|
43
57
|
}
|
|
44
58
|
}
|
|
45
59
|
updateValue(value) {
|
|
46
|
-
const
|
|
60
|
+
const max = this.max;
|
|
61
|
+
const index = value > max ? max + 1 : Math.max(0, value);
|
|
47
62
|
const height = this.wrapper.getBoundingClientRect().height || 16;
|
|
48
63
|
this.wrapper.style.transform = "translateY(-".concat(index * height, "px)");
|
|
49
|
-
const displayValue = value >
|
|
64
|
+
const displayValue = value > max ? "".concat(max, "+") : "".concat(value);
|
|
50
65
|
this.setAttribute("aria-label", displayValue);
|
|
51
66
|
}
|
|
52
67
|
set value(value) {
|
|
@@ -55,12 +70,25 @@ class Odometer extends HTMLElement {
|
|
|
55
70
|
this.setAttribute("value", String(value));
|
|
56
71
|
if (this._initialized) {
|
|
57
72
|
this.updateValue(value);
|
|
73
|
+
this.dispatchEvent(new CustomEvent("change", {
|
|
74
|
+
detail: {
|
|
75
|
+
value
|
|
76
|
+
},
|
|
77
|
+
bubbles: true,
|
|
78
|
+
composed: true
|
|
79
|
+
}));
|
|
58
80
|
}
|
|
59
81
|
}
|
|
60
82
|
}
|
|
61
83
|
get value() {
|
|
62
84
|
return parseInt(this.getAttribute("value") || "0", 10) || 0;
|
|
63
85
|
}
|
|
86
|
+
set max(value) {
|
|
87
|
+
this.setAttribute("max", String(value));
|
|
88
|
+
}
|
|
89
|
+
get max() {
|
|
90
|
+
return parseInt(this.getAttribute("max") || "9", 10) || 9;
|
|
91
|
+
}
|
|
64
92
|
}
|
|
65
93
|
if (!customElements.get("bl-odometer")) {
|
|
66
94
|
customElements.define("bl-odometer", Odometer);
|
package/dist/merged.scss
CHANGED
package/dist/style.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/*!
|
|
3
|
-
* Blue Web v1.19.
|
|
3
|
+
* Blue Web v1.19.1 (https://bruegmann.github.io/blue-web)
|
|
4
4
|
* Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
|
|
5
5
|
*/
|
|
6
6
|
:root {
|
package/dist/style.min.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@charset "UTF-8";/*!
|
|
2
|
-
* Blue Web v1.19.
|
|
2
|
+
* Blue Web v1.19.1 (https://bruegmann.github.io/blue-web)
|
|
3
3
|
* Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
|
|
4
4
|
*/:root{--blue-app-bg:hsl(217,10%,94%);--blue-scrollbar-thumb-color-rgb:255,255,255;--blue-sidebar-width:16.563rem;--blue-sidebar-color:hsl(217,11%,15%);--blue-theme:var(--theme,hsl(217,10%,94%));--blue-shimmering:0.9;--blue-sidebar-bg:hsl(217,10%,94%);--blue-header-bg:hsl(217,10%,94%);--blue-header-color:hsl(217,11%,15%);--blue-action-link-bg-color:var(--blue-theme);--blue-menu-item-indicator-bg:hsl(221,97%,53%);--blue-menu-item-height:calc(var(--bs-btn-border-width,1px) + var(--bs-btn-padding-y,0.375rem) + var(--bs-btn-font-size,1rem) * var(--bs-btn-line-height,1.5) + var(--bs-btn-padding-y,0.375rem) + var(--bs-btn-border-width,1px))}[data-bs-theme=dark]{--blue-app-bg:hsl(217,10%,8%);--blue-sidebar-color:#fff;--blue-sidebar-bg:hsl(217,10%,8%);--blue-header-bg:hsl(217,10%,8%);--blue-header-color:#fff;--blue-menu-item-indicator-bg:#fff}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes blAppearUp{from{margin-top:2.5rem}to{margin-top:0}}@keyframes blue-menu-item-dropdown{from{transform:translateY(-50%);opacity:0}}@keyframes enabledBlueAppPage{from{transform:scale(0.98);opacity:0}to{opacity:1}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes alert-in{from{transform:scale(0,0);opacity:0.2;transition:0s}}@keyframes circlebounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}@keyframes scrolling{from{transform:translateX(-100%)}to{transform:translateX(100%)}}/*!
|
|
5
5
|
* Bootstrap v5.3.8 (https://getbootstrap.com/)
|
package/dist/style.scss
CHANGED