material-inspired-component-library 1.0.3 → 1.1.0
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/README.md +6 -0
- package/components/slider/index.scss +11 -8
- package/components/textfield/README.md +48 -15
- package/components/textfield/index.scss +98 -55
- package/components/textfield/index.ts +23 -16
- package/components.ts +2 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/slider.css +1 -1
- package/dist/textfield.css +1 -1
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/slider.html +1 -0
- package/docs/textfield.html +30 -17
- package/package.json +2 -2
package/docs/micl.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";(()=>{const e="dialog.micl-bottomsheet",t=(()=>{var e=0;const t=t=>{let n=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),i=(t.dataset.snapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>0&&e<=n);return e||(e=t.getBoundingClientRect().height),[...new Set(i.concat([e,n]).sort())]},n=(e,n)=>{let i=e.getBoundingClientRect().height,o=t(e);return o.filter(e=>e>i+4)[0]||o[n?o.length-1:0]},i=(e,t)=>{e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:e=>{if(!e.matches("dialog.micl-bottomsheet")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const o=e.querySelector(".micl-bottomsheet__headline");if(!o)return;const l=o.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{const t=n(e,!1);t>4&&i(e,t)});let a,
|
|
1
|
+
(()=>{"use strict";(()=>{const e="dialog.micl-bottomsheet",t=(()=>{var e=0;const t=t=>{let n=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),i=(t.dataset.snapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>0&&e<=n);return e||(e=t.getBoundingClientRect().height),[...new Set(i.concat([e,n]).sort())]},n=(e,n)=>{let i=e.getBoundingClientRect().height,o=t(e);return o.filter(e=>e>i+4)[0]||o[n?o.length-1:0]},i=(e,t)=>{e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:e=>{if(!e.matches("dialog.micl-bottomsheet")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const o=e.querySelector(".micl-bottomsheet__headline");if(!o)return;const l=o.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{const t=n(e,!1);t>4&&i(e,t)});let r,a,c=!1,s=!1;function m(t){const n=t.clientY;c&&Math.abs(r-n)>4&&(c=!1,s=!0,e.classList.add("micl-bottomsheet--resizing")),s&&i(e,a+r-n)}function d(o){c=!1,e.classList.remove("micl-bottomsheet--resizing"),s&&(s=!1,o.clientY<r?i(e,n(e,!0)):e.getBoundingClientRect().height<48?(e.popover&&e.hidePopover(),i(e,a)):i(e,(e=>{let n=e.getBoundingClientRect().height,i=t(e),o=i.filter(e=>e<n-4);return o[o.length-1]||i[0]})(e)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",d))}o.addEventListener("mousedown",t=>{t.eventPhase===Event.AT_TARGET&&(c=!0,t.preventDefault(),r=t.clientY,a=e.getBoundingClientRect().height,document.addEventListener("mousemove",m),document.addEventListener("mouseup",d))})},cleanup:e=>{e.matches("dialog.micl-bottomsheet")&&delete e.dataset.miclinitialized}}})(),n="button[popovertarget],button.micl-button--toggle",i=(()=>{const e=e=>{e.target&&e.target instanceof HTMLButtonElement&&(e.target.popoverTargetElement instanceof HTMLDialogElement&&(e.target.popoverTargetElement.open?e.target.popoverTargetElement.close():e.target.popoverTargetElement.showModal()),e.target.classList.contains("micl-button--toggle")&&e.target.classList.toggle("micl-button--selected"))};return{initialize:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",(t.popoverTargetElement instanceof HTMLDialogElement&&!t.popoverTargetElement.hasAttribute("popover")||t.classList.contains("micl-button--toggle"))&&t.addEventListener("click",e))},cleanup:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&(document.removeEventListener("click",e),delete t.dataset.miclinitialized)}}})(),o=".micl-checkbox",l={keydown:e=>{if(e.target.matches(o)&&e instanceof KeyboardEvent&&e.target instanceof HTMLInputElement&&!e.target.disabled)switch(e.key){case"Enter":case" ":e.target.checked=!e.target.checked,e.preventDefault()}}},r=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",a=(()=>{const e=e=>!!e&&e.classList.contains("micl-list-item--disabled"),t=e=>!!e&&e.matches(":has(input[type=checkbox]:checked)");return{keydown:n=>{if(!(n instanceof KeyboardEvent&&n.target instanceof Element&&n.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const i=n.target.parentElement;if(!i)return;let o=[];if(i instanceof HTMLDetailsElement?o=Array.from(i.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):i instanceof HTMLUListElement&&(o=Array.from(i.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===o.length)return;let l=o.findIndex(e=>t(e));-1===l&&(l=o.findIndex(e=>0===e.tabIndex)),-1===l&&(l=0);let r=l;switch(n.key){case"ArrowDown":r=(l+1)%o.length,n.preventDefault();break;case"ArrowUp":r=(l-1+o.length)%o.length,n.preventDefault();break;case"Tab":let e=o.findIndex(e=>t(e));-1===e?0!==l&&(o[l].tabIndex=-1,o[0].tabIndex=0):e!==l&&(o[l].tabIndex=-1,o[e].tabIndex=0);break;case"Enter":case" ":const i=n.target.querySelector("input[type=checkbox].micl-checkbox");i instanceof HTMLInputElement&&(i.checked=!i.checked)}r!==l&&(o[l].tabIndex=-1,o[r].tabIndex=0,o[r].focus())}}})(),c=".micl-menu[popover]",s=(()=>{const e=(e,t)=>{const n=e.getBoundingClientRect().y,i=t.getBoundingClientRect().y,o=window.getComputedStyle(t).getPropertyValue("transform-origin");return(n>i?"bottom ":"top ")+(parseInt(o)>0?"right":"left")};return{initialize:t=>{if(!t.matches(".micl-menu[popover]")||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const n=document.querySelector(`[popovertarget="${t.id}"]`);n&&t.addEventListener("beforetoggle",i=>{"open"===i.oldState&&(t.style.transformOrigin=e(n,t))}),n&&t.addEventListener("toggle",i=>{"closed"===i.oldState&&(t.style.transformOrigin=e(n,t))})}}})(),m="input[type=range].micl-slider-xs,input[type=range].micl-slider-s,input[type=range].micl-slider-m,input[type=range].micl-slider-l,input[type=range].micl-slider-xl",d=(()=>{const e=String.fromCharCode(8226),t=String.fromCharCode(8201);return{initialize:n=>{n.style.setProperty("--md-sys-slider-max",n.max||"100"),n.style.setProperty("--md-sys-slider-min",n.min||"0"),n.style.setProperty("--md-sys-slider-value",n.value),n.style.setProperty("--md-sys-slider-tip",JSON.stringify(n.value+""));const i=n.getBoundingClientRect(),o=document.elementFromPoint(Math.max(i.x-1,0),Math.max(i.y-1,0));o&&(n.style.color=window.getComputedStyle(o).getPropertyValue("background-color"));const l=parseFloat(n.max),r=parseFloat(n.min),a=(e=>{const t=[],n=parseFloat(e.max),i=parseFloat(e.min);return e.list&&!isNaN(n)&&!isNaN(i)&&n>i&&e.list.querySelectorAll("option[value]").forEach(e=>{let o=parseFloat(e.value);!isNaN(o)&&o>=i&&o<=n&&t.push(o)}),t})(n).sort((e,t)=>e-t).map(e=>Math.round(100*(e-r)/(l-r)));if(a.length>0){const o=document.createElement("canvas"),l=o.getContext("2d");if(l){l.font=window.getComputedStyle(n).getPropertyValue("font");let o=l.measureText(t).width,r=l.measureText(e).width,c=i.width-10,s=0,m="";a.forEach(n=>{let i=c*n/100,l=Math.round((i-s)/o)-1;for(let e=0;e<l;e++)m+=t,s+=o;m+=e,s+=r}),n.dataset.miclsliderticks=m}o.remove()}else n.dataset.miclsliderticks=e},input:e=>{e.target.matches(".micl-slider-xs,.micl-slider-s,.micl-slider-m,.micl-slider-l,.micl-slider-xl")&&e.target instanceof HTMLInputElement&&!e.target.disabled&&(e.target.style.setProperty("--md-sys-slider-value",e.target.value),e.target.style.setProperty("--md-sys-slider-tip",JSON.stringify(e.target.value+"")))}}})(),u=".micl-textfield-outlined > input,.micl-textfield-filled > input",p=".micl-textfield-outlined > select,.micl-textfield-filled > select",g=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",f=(()=>{const e=".micl-textfield__character-counter";return{initialize:t=>{if(t.dataset.miclinitialized)return;if(t.dataset.miclinitialized="1",t.value&&(t.dataset.miclvalue="1"),t instanceof HTMLSelectElement||!t.maxLength)return;const n=t.parentElement?.querySelector(e);n&&(n.textContent=`${t.value.length}/${t.maxLength}`)},input:t=>{if(!t.target.matches(`${u},${p},${g}`)||!(t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement||t.target instanceof HTMLTextAreaElement)||!t.target.dataset.miclinitialized||t.target.disabled)return;if(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,t.target instanceof HTMLSelectElement||!t.target.maxLength)return;const n=t.target.parentElement?.querySelector(e);n&&(n.textContent=`${t.target.value.length}/${t.target.maxLength}`)}}})();(()=>{const h={[e]:{component:t,type:HTMLDialogElement},[n]:{component:i,type:HTMLButtonElement},[o]:{component:l,type:HTMLInputElement},[r]:{component:a,type:HTMLElement},[c]:{component:s,type:HTMLElement},[p]:{component:f,type:HTMLSelectElement},[m]:{component:d,type:HTMLInputElement},[g]:{component:f,type:HTMLTextAreaElement},[u]:{component:f,type:HTMLInputElement}},y=Object.keys(h).join(","),v=e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.matches(t)&&e instanceof i&&"function"==typeof n.initialize)return void n.initialize(e)},E=e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.matches(t)&&e instanceof i&&"function"==typeof n.cleanup)return void n.cleanup(e)};new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(y)&&v(e),e.querySelectorAll(y).forEach(v))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(y)&&E(e),e.querySelectorAll(y).forEach(E))}))})}).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll(y).forEach(v),document.querySelectorAll('[class*="micl-"]').forEach(e=>{window.getComputedStyle(e).getPropertyValue("--miclripple")&&e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;const n=t.clientX,i=t.clientY,o=e.getBoundingClientRect(),l=2*Math.sqrt(Math.pow(o.width,2)+Math.pow(o.height,2));e.style.cssText="--s:0;--o:1;",e.offsetTop,e.style.cssText=`--t:1;--o:0;--d:${l};--x:${n-o.left};--y:${i-o.top}`})}),document.addEventListener("input",e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.target.matches(t)&&e.target instanceof i&&"function"==typeof n.input)return void n.input(e)}),document.addEventListener("keydown",e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.target.matches(t)&&e.target instanceof i&&"function"==typeof n.keydown)return void n.keydown(e)})})()})()})();
|
package/docs/slider.html
CHANGED
package/docs/textfield.html
CHANGED
|
@@ -45,15 +45,19 @@
|
|
|
45
45
|
<input type="text" id="mytextfield4" disabled value="Paris">
|
|
46
46
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
47
47
|
</div>
|
|
48
|
+
<div class="micl-textfield-outlined">
|
|
49
|
+
<label for="mytextfield5">Multiline text field</label>
|
|
50
|
+
<textarea id="mytextfield5"></textarea>
|
|
51
|
+
</div>
|
|
48
52
|
<div class="micl-textfield-outlined micl-textfield--error">
|
|
49
53
|
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
50
|
-
<label for="
|
|
51
|
-
<input type="text" id="
|
|
54
|
+
<label for="mytextfield6">Label text</label>
|
|
55
|
+
<input type="text" id="mytextfield6">
|
|
52
56
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
53
57
|
</div>
|
|
54
58
|
<div class="micl-textfield-outlined micl-textfield--error">
|
|
55
|
-
<label for="
|
|
56
|
-
<input type="password" id="
|
|
59
|
+
<label for="mytextfield7">Password</label>
|
|
60
|
+
<input type="password" id="mytextfield7" value="foobar">
|
|
57
61
|
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
58
62
|
<span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
|
|
59
63
|
</div>
|
|
@@ -71,7 +75,7 @@
|
|
|
71
75
|
<span class="micl-textfield__supporting-text">Supporting text</span>
|
|
72
76
|
</div>
|
|
73
77
|
<div class="micl-textfield-outlined">
|
|
74
|
-
<span class="micl-textfield__prefix">€</span>
|
|
78
|
+
<span class="micl-textfield__prefix" aria-label="Euro">€</span>
|
|
75
79
|
<label for="mytextfield13">Amount</label>
|
|
76
80
|
<input type="text" id="mytextfield13" value="299.89">
|
|
77
81
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">credit_card</span>
|
|
@@ -83,16 +87,20 @@
|
|
|
83
87
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
84
88
|
<span class="micl-textfield__supporting-text">This input field is disabled</span>
|
|
85
89
|
</div>
|
|
90
|
+
<div class="micl-textfield-outlined">
|
|
91
|
+
<label for="mytextfield15">Text area</label>
|
|
92
|
+
<textarea id="mytextfield15" rows="3">Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. </textarea>
|
|
93
|
+
</div>
|
|
86
94
|
<div class="micl-textfield-outlined micl-textfield--error">
|
|
87
95
|
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
88
|
-
<label for="
|
|
89
|
-
<input type="text" id="
|
|
96
|
+
<label for="mytextfield16">Label text</label>
|
|
97
|
+
<input type="text" id="mytextfield16">
|
|
90
98
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
91
99
|
</div>
|
|
92
100
|
<div class="micl-textfield-outlined micl-textfield--error">
|
|
93
|
-
<label for="
|
|
94
|
-
<input type="number" id="
|
|
95
|
-
<span class="micl-textfield__suffix">kg</span>
|
|
101
|
+
<label for="mytextfield17">Weight</label>
|
|
102
|
+
<input type="number" id="mytextfield17" value="17800">
|
|
103
|
+
<span class="micl-textfield__suffix" aria-label="Kilograms">kg</span>
|
|
96
104
|
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
97
105
|
<span class="micl-textfield__supporting-text">Too heavy</span>
|
|
98
106
|
</div>
|
|
@@ -106,15 +114,15 @@
|
|
|
106
114
|
</div>
|
|
107
115
|
<div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
|
|
108
116
|
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
109
|
-
<span class="micl-textfield__prefix">NOK</span>
|
|
117
|
+
<span class="micl-textfield__prefix" aria-label="Norwegian kroner">NOK</span>
|
|
110
118
|
<label for="mytextfield22">Amount*</label>
|
|
111
119
|
<input type="text" id="mytextfield22" required value="">
|
|
112
120
|
<span class="micl-textfield__supporting-text">In Norwegian kroner</span>
|
|
113
121
|
</div>
|
|
114
122
|
<div class="micl-textfield-filled">
|
|
115
123
|
<span class="micl-textfield__character-counter"></span>
|
|
116
|
-
<span class="micl-textfield__supporting-text">Enter at least twelve characters</span>
|
|
117
|
-
<span class="micl-textfield__prefix">€</span>
|
|
124
|
+
<span class="micl-textfield__supporting-text micl-textfield__supporting-text--focus">Enter at least twelve characters</span>
|
|
125
|
+
<span class="micl-textfield__prefix" aria-label="Euro">€</span>
|
|
118
126
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
119
127
|
<input type="text" id="mytextfield23" maxlength="24">
|
|
120
128
|
<label for="mytextfield23">Label text</label>
|
|
@@ -127,16 +135,21 @@
|
|
|
127
135
|
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
128
136
|
<span class="micl-textfield__supporting-text">This input field is disabled</span>
|
|
129
137
|
</div>
|
|
138
|
+
<div class="micl-textfield-filled">
|
|
139
|
+
<label for="mytextfield25">Multiline text field</label>
|
|
140
|
+
<textarea id="mytextfield25" maxlength="100">Lorem ipsum dolor sit amet consectetur adipiscing elit</textarea>
|
|
141
|
+
<span class="micl-textfield__character-counter"></span>
|
|
142
|
+
</div>
|
|
130
143
|
<div class="micl-textfield-filled micl-textfield--error">
|
|
131
144
|
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
132
|
-
<label for="
|
|
133
|
-
<input type="text" id="
|
|
145
|
+
<label for="mytextfield26">Label text</label>
|
|
146
|
+
<input type="text" id="mytextfield26">
|
|
134
147
|
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
135
148
|
</div>
|
|
136
149
|
<div class="micl-textfield-filled micl-textfield--error">
|
|
137
150
|
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
138
|
-
<label for="
|
|
139
|
-
<input type="text" id="
|
|
151
|
+
<label for="mytextfield27">City</label>
|
|
152
|
+
<input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
|
|
140
153
|
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
141
154
|
<span class="micl-textfield__supporting-text">Incorrect spelling</span>
|
|
142
155
|
<span class="micl-textfield__character-counter"></span>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "material-inspired-component-library",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
|
|
5
5
|
"author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"homepage": "https://github.com/henkpb/micl",
|
|
35
35
|
"bugs": {
|
|
36
|
-
"url": "https://github.com/henkpb/
|
|
36
|
+
"url": "https://github.com/henkpb/micl/issues"
|
|
37
37
|
},
|
|
38
38
|
"main": "index.js",
|
|
39
39
|
"scripts": {
|