diff --git a/components/css/main.css b/components/css/main.css index a1950a4..51a36db 100644 --- a/components/css/main.css +++ b/components/css/main.css @@ -17,21 +17,71 @@ html, body { body { --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; + --background-color: 255, 255, 255; --danger-color: red; color: rgba(var(--text-color), 1); - background: var(--background-color); + background: rgba(var(--background-color), 1); + /* string - green */ + /* keyword - dark pink */ + /* comment - gray */ + /* type - light blue */ + /* literal */ + /* html/xml tag */ + /* html/xml attribute name */ + /* html/xml attribute value*/ + /* decimal - blue */ +} +body pre .str, body code .str { + color: #65B042; +} +body pre .kwd, body code .kwd { + color: #E28964; +} +body pre .com, body code .com { + color: #AEAEAE; + font-style: italic; +} +body pre .typ, body code .typ { + color: #4395ff; +} +body pre .lit, body code .lit { + color: #1a76c2; +} +body pre .tag, body code .tag { + color: #1976D2; +} +body pre .atn, body code .atn { + color: #00C853; +} +body pre .atv, body code .atv { + color: #F57F17; +} +body pre .dec, body code .dec { + color: #3387CC; } body[data-theme=dark] { + /* html/xml tag */ + /* html/xml attribute name */ + /* html/xml attribute value*/ +} +body[data-theme=dark], +body[data-theme=dark] * { --accent-color: #976dd6; --text-color: 240, 240, 240; --text-color-light: 170, 170, 170; - --foreground-color: 20, 20, 20; - --background-color: #0a0a0a; + --background-color: 20, 20, 20; --danger-color: rgb(255, 106, 106); } +body[data-theme=dark] pre .tag, body[data-theme=dark] code .tag { + color: #29B6F6; +} +body[data-theme=dark] pre .atn, body[data-theme=dark] code .atn { + color: #1DE9B6; +} +body[data-theme=dark] pre .atv, body[data-theme=dark] code .atv { + color: #84FFFF; +} p { font-size: 0.8; @@ -74,6 +124,23 @@ ul { list-style: none; } +table { + position: relative; + text-align: left; + border-radius: 0.5rem; + border-collapse: separate; + border-spacing: 1rem 1.5rem; + background-color: rgba(var(--text-color), 0.04); + margin: 1rem 0; +} +table p:only-of-type { + margin-bottom: 0; +} +table td { + line-height: 1.7; + max-width: 65ch; +} + .flex { display: flex; } @@ -312,32 +379,6 @@ ul { transform: scale(0) rotate(-90deg); } -pre .str, code .str { - color: #65B042; -} - -/* string - green */ -pre .kwd, code .kwd { - color: #E28964; -} - -/* keyword - dark pink */ -pre .com, code .com { - color: #AEAEAE; - font-style: italic; -} - -/* comment - gray */ -pre .typ, code .typ { - color: #4395ff; -} - -/* type - light blue */ -pre .lit, code .lit { - color: #1a76c2; -} - -/* literal */ pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } @@ -348,35 +389,17 @@ pre .pln, code .pln { } /* plaintext */ -pre .tag, code .tag { - color: #22863a; -} - -/* html/xml tag */ -pre .atn, code .atn { - color: #005cc5; -} - -/* html/xml attribute name */ -pre .atv, code .atv { - color: var(--accent-color); -} - -/* html/xml attribute value*/ -pre .dec, code .dec { - color: #3387CC; -} - -/* decimal - blue */ pre { max-width: 100%; margin: 1rem 0; padding: 0 1.5rem; overflow-x: auto; font-size: 0.9rem; + font-weight: 500; white-space: pre-line; border-radius: 0.5rem; background: rgba(var(--text-color), 0.04); + line-height: 1.7; } code { @@ -434,13 +457,14 @@ main { background-color: rgba(0, 0, 0, 0.5); } -#side_nav, .right { max-height: 100%; overflow-y: auto; - padding-bottom: 3rem; } +#side_nav > :last-child { + padding-bottom: 3rem; +} #side_nav h4 { font-size: 0.9rem; letter-spacing: 0.08em; @@ -511,6 +535,10 @@ ol li::first-letter { text-transform: capitalize; } +strong { + max-width: 65ch; +} + strong.important { display: flex; padding: 0.5rem; @@ -520,6 +548,15 @@ strong.important { background-color: khaki; } +.highlight { + display: inline-flex; + font-family: "Roboto Mono", monospace; + background-color: rgba(var(--text-color), 0.1); + border-radius: 0.3rem; + padding: 0 0.5rem; + font-size: 0.9rem; +} + #total_components_count { font-size: 4rem; } @@ -540,25 +577,6 @@ strong.important { grid-template-rows: auto 1fr; grid-template-columns: 1fr; } - - #side_nav { - display: flex; - flex-direction: column; - position: fixed; - z-index: 5; - height: 100%; - width: calc(100% - 4rem); - transition: transform 0.3s; - background-color: rgba(var(--foreground-color), 1); - box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1); - } - #side_nav:not(.reveal) { - transform: translateX(-100%); - } - - .reveal { - transform: none; - } } @media screen and (min-width: 640px) { #main_header { @@ -584,7 +602,7 @@ strong.important { } .page__title { - font-size: 2rem; + font-size: 2.5rem; } #overview_page { diff --git a/components/css/main.min.css b/components/css/main.min.css index d207a38..694d843 100644 --- a/components/css/main.min.css +++ b/components/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.list,ul{list-style:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#4d2588;--text-color:17,17,17;--foreground-color:255,255,255;--background-color:#F6f6f6;--danger-color:red;color:rgba(var(--text-color),1);background:var(--background-color)}body[data-theme=dark]{--accent-color:#976dd6;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--danger-color:rgb(255, 106, 106)}p{font-size:.8;max-width:65ch;line-height:1.7;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.list__item,h2,ol li::first-letter{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact,.theme-switcher{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.interact{overflow:hidden}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.theme-switcher{justify-self:flex-end;width:1.5rem;height:1.5rem}.card,.list{flex-direction:column}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#4395ff}code .lit,pre .lit{color:#1a76c2}code .pln,code .pun,pre .pln,pre .pun{color:rgba(var(--text-color),.8)}code .tag,pre .tag{color:#22863a}code .atn,pre .atn{color:#005cc5}code .atv,pre .atv{color:var(--accent-color)}code .dec,pre .dec{color:#3387CC}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;font-size:.9rem;white-space:pre-line;border-radius:.5rem;background:rgba(var(--text-color),.04)}code{border-radius:.3rem;font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color),.1)}code>*{font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}h2:first-of-type{margin-top:1rem}main{display:grid;height:100%}.card,.list,.list__item,.page,strong.important{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#backdrop{position:fixed;z-index:4;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5)}#side_nav,.right{max-height:100%;overflow-y:auto;padding-bottom:3rem}#side_nav h4,.right{padding:1.5rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}sm-tab-header{margin-bottom:1.5rem}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:3rem}ol li:last-of-type{margin-bottom:0}strong.important{padding:.5rem;margin:.5rem 0;border-radius:.3rem;color:rgba(0,0,0,.8);background-color:khaki}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}.comp-checkbox__title{margin-left:.5rem}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}#side_nav{display:flex;flex-direction:column;position:fixed;z-index:5;height:100%;width:calc(100% - 4rem);transition:transform .3s;background-color:rgba(var(--foreground-color),1);box-shadow:.5rem 0 2rem rgba(0,0,0,.1)}#side_nav:not(.reveal){transform:translateX(-100%)}.reveal{transform:none}}@media screen and (min-width:640px){#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}} \ No newline at end of file +p,pre,table td{line-height:1.7}.list,ul{list-style:none}p,strong,table td{max-width:65ch}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#4d2588;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red;color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body code .str,body pre .str{color:#65B042}body code .kwd,body pre .kwd{color:#E28964}body code .com,body pre .com{color:#AEAEAE;font-style:italic}body code .typ,body pre .typ{color:#4395ff}body code .lit,body pre .lit{color:#1a76c2}body code .tag,body pre .tag{color:#1976D2}body code .atn,body pre .atn{color:#00C853}body code .atv,body pre .atv{color:#F57F17}body code .dec,body pre .dec{color:#3387CC}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#976dd6;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:20,20,20;--danger-color:rgb(255, 106, 106)}body[data-theme=dark] code .tag,body[data-theme=dark] pre .tag{color:#29B6F6}body[data-theme=dark] code .atn,body[data-theme=dark] pre .atn{color:#1DE9B6}body[data-theme=dark] code .atv,body[data-theme=dark] pre .atv{color:#84FFFF}p{font-size:.8;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}.color-0-8,code .pln,code .pun,pre .pln,pre .pun{color:rgba(var(--text-color),.8)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}table{position:relative;text-align:left;border-radius:.5rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color),.04);margin:1rem 0}table p:only-of-type{margin-bottom:0}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}#side_nav h4,.highlight,pre{font-size:.9rem}.uppercase{text-transform:uppercase}.capitalize,.list__item,h2,ol li::first-letter{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.comp-checkbox__title{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500,pre{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact,.theme-switcher{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.highlight,code,strong.important{border-radius:.3rem}.interact{overflow:hidden}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.theme-switcher{justify-self:flex-end;width:1.5rem;height:1.5rem}.card,.list{flex-direction:column}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;white-space:pre-line;border-radius:.5rem;background:rgba(var(--text-color),.04)}code{font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color),.1)}code>*{font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}h2:first-of-type{margin-top:1rem}main{display:grid;height:100%}.card,.list,.list__item,.page,strong.important{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#backdrop{position:fixed;z-index:4;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5)}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}sm-tab-header{margin-bottom:1.5rem}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:3rem}ol li:last-of-type{margin-bottom:0}strong.important{padding:.5rem;margin:.5rem 0;color:rgba(0,0,0,.8);background-color:khaki}.highlight{display:inline-flex;font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color),.1);padding:0 .5rem}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}} \ No newline at end of file diff --git a/components/css/main.scss b/components/css/main.scss index 6fff9b5..1c0b209 100644 --- a/components/css/main.scss +++ b/components/css/main.scss @@ -14,19 +14,34 @@ html, body{ body { --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; + --background-color: 255, 255, 255; --danger-color: red; color: rgba(var(--text-color), 1); - background: var(--background-color); + background: rgba(var(--background-color), 1); + + pre .str, code .str { color: #65B042; } /* string - green */ + pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ + pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ + pre .typ, code .typ { color: #4395ff; } /* type - light blue */ + pre .lit, code .lit { color: #1a76c2; } /* literal */ + pre .tag, code .tag { color: #1976D2; } /* html/xml tag */ + pre .atn, code .atn { color: #00C853; } /* html/xml attribute name */ + pre .atv, code .atv { color: #F57F17 } /* html/xml attribute value*/ + pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ } body[data-theme='dark']{ - --accent-color: #976dd6; - --text-color: 240, 240, 240; - --text-color-light: 170, 170, 170; - --foreground-color: 20, 20, 20; - --background-color: #0a0a0a; - --danger-color: rgb(255, 106, 106); + &, + *{ + --accent-color: #976dd6; + --text-color: 240, 240, 240; + --text-color-light: 170, 170, 170; + --background-color: 20, 20, 20; + --danger-color: rgb(255, 106, 106); + } + + pre .tag, code .tag { color: #29B6F6; } /* html/xml tag */ + pre .atn, code .atn { color: #1DE9B6; } /* html/xml attribute name */ + pre .atv, code .atv { color: #84FFFF; } /* html/xml attribute value*/ } p { font-size: 0.8; @@ -65,6 +80,22 @@ sm-button{ ul{ list-style: none; } +table{ + position: relative; + text-align: left; + border-radius: 0.5rem; + border-collapse: separate; + border-spacing: 1rem 1.5rem; + background-color: rgba(var(--text-color), .04); + margin: 1rem 0; + p:only-of-type{ + margin-bottom: 0; + } + td{ + line-height: 1.7; + max-width: 65ch; + } +} .flex{ display: flex; } @@ -260,18 +291,8 @@ ul{ //Syntax highlighting - -pre .str, code .str { color: #65B042; } /* string - green */ -pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ -pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ -pre .typ, code .typ { color: #4395ff; } /* type - light blue */ -pre .lit, code .lit { color: #1a76c2; } /* literal */ pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */ pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */ -pre .tag, code .tag { color: #22863a; } /* html/xml tag */ -pre .atn, code .atn { color: #005cc5; } /* html/xml attribute name */ -pre .atv, code .atv { color: var(--accent-color); } /* html/xml attribute value*/ -pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ pre{ max-width: 100%; @@ -279,9 +300,11 @@ pre{ padding: 0 1.5rem; overflow-x: auto; font-size: 0.9rem; + font-weight: 500; white-space: pre-line; border-radius: 0.5rem; background: rgba(var(--text-color), .04); + line-height: 1.7; } code{ border-radius: 0.3rem; @@ -331,13 +354,14 @@ main{ bottom: 0; background-color: rgba(0,0,0, 0.5); } -#side_nav, .right{ max-height: 100%; overflow-y: auto; - padding-bottom: 3rem; } #side_nav{ + & > :last-child{ + padding-bottom: 3rem; + } h4{ font-size: 0.9rem; letter-spacing: 0.08em; @@ -400,6 +424,9 @@ ol{ } } } +strong{ + max-width: 65ch; +} strong.important{ display: flex; padding: 0.5rem; @@ -408,6 +435,14 @@ strong.important{ color: rgba(0,0,0, 0.8); background-color: khaki; } +.highlight{ + display: inline-flex; + font-family: 'Roboto Mono', monospace; + background-color: rgba(var(--text-color), .1); + border-radius: 0.3rem; + padding: 0 0.5rem; + font-size: 0.9rem; +} #total_components_count{ font-size: 4rem; } @@ -425,23 +460,6 @@ strong.important{ grid-template-rows: auto 1fr; grid-template-columns: 1fr; } - #side_nav{ - display: flex; - flex-direction: column; - position: fixed; - z-index: 5; - height: 100%; - width: calc(100% - 4rem); - transition: transform 0.3s; - background-color: rgba(var(--foreground-color), 1); - box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1); - &:not(.reveal){ - transform: translateX(-100%); - } - } - .reveal{ - transform: none; - } } @media screen and (min-width: 640px){ #main_header{ @@ -463,7 +481,7 @@ strong.important{ } } .page__title{ - font-size: 2rem; + font-size: 2.5rem; } #overview_page{ display: grid; diff --git a/components/dist/button.js b/components/dist/button.js index 1adb003..4aeebff 100644 --- a/components/dist/button.js +++ b/components/dist/button.js @@ -11,27 +11,17 @@ smButton.innerHTML = ` display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; + width: auto; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --padding: 0.6rem 1.2rem; --border-radius: 0.3rem; --background: rgba(var(--text-color), 0.1); } -:host([disabled]) .button{ - cursor: not-allowed; - opacity: 0.6; - background: rgba(var(--text-color), 0.3) !important; - color: rgba(var(--foreground-color), 0.6); -} -:host([disabled][variant="primary"]) .button{ - color: rgba(var(--text-color), 1); -} :host([variant='primary']) .button{ background: var(--accent-color); - color: rgba(var(--foreground-color), 1); + color: rgba(var(--background-color), 1); } :host([variant='outlined']) .button{ -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset; @@ -40,15 +30,9 @@ smButton.innerHTML = ` color: var(--accent-color); } :host([variant='no-outline']) .button{ - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); color: var(--accent-color); } -:host(.small) .button{ - padding: 0.4rem 0.8rem; -} -:host(.round) .button{ - border-radius: 10rem; -} .button { position: relative; display: -webkit-box; @@ -77,13 +61,11 @@ smButton.innerHTML = ` color: inherit; align-items: center; } -:host(:not([disabled])) .button:focus-visible{ - -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color); - box-shadow: 0 0 0 0.1rem var(--accent-color); -} -:host([variant='outlined']) .button:focus-visible{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color); +:host([disabled]) .button{ + cursor: not-allowed; + opacity: 0.6; + color: rgba(var(--text-color), 1); + background-color: rgba(var(--text-color), 0.3); } @media (hover: hover){ :host(:not([disabled])) .button:hover{ @@ -106,9 +88,9 @@ smButton.innerHTML = ` } } -`; +`; customElements.define('sm-button', class extends HTMLElement { constructor() { @@ -117,42 +99,36 @@ customElements.define('sm-button', mode: 'open' }).append(smButton.content.cloneNode(true)) } + static get observedAttributes() { + return ['disabled']; + } get disabled() { - return this.isDisabled + return this.hasAttribute('disabled') } set disabled(value) { - if (value && !this.isDisabled) { - this.isDisabled = true + if (value) { this.setAttribute('disabled', '') - this.button.removeAttribute('tabindex') - } else if (!value && this.isDisabled) { - this.isDisabled = false + }else { this.removeAttribute('disabled') } } - dispatch() { - if (this.isDisabled) { - this.dispatchEvent(new CustomEvent('disabled', { - bubbles: true, - composed: true - })) - } else { - this.dispatchEvent(new CustomEvent('clicked', { - bubbles: true, - composed: true - })) - } - } connectedCallback() { - this.isDisabled = false - this.button = this.shadowRoot.querySelector('.button') - if (this.hasAttribute('disabled') && !this.isDisabled) - this.isDisabled = true - this.addEventListener('click', (e) => { - this.dispatch() - }) + if (!this.hasAttribute('disabled')) { + this.setAttribute('tabindex', '0') + } + this.setAttribute('role', 'button') + } + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'disabled') { + this.removeAttribute('tabindex') + this.setAttribute('aria-disabled', 'true') + } + else { + this.setAttribute('tabindex', '0') + this.setAttribute('aria-disabled', 'false') + } } }) \ No newline at end of file diff --git a/components/dist/button.min.js b/components/dist/button.min.js index 566aa98..71dbcc3 100644 --- a/components/dist/button.min.js +++ b/components/dist/button.min.js @@ -1 +1 @@ -const smButton=document.createElement("template");smButton.innerHTML="\n\n",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}get disabled(){return this.isDisabled}set disabled(n){n&&!this.isDisabled?(this.isDisabled=!0,this.setAttribute("disabled",""),this.button.removeAttribute("tabindex")):!n&&this.isDisabled&&(this.isDisabled=!1,this.removeAttribute("disabled"))}dispatch(){this.isDisabled?this.dispatchEvent(new CustomEvent("disabled",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("clicked",{bubbles:!0,composed:!0}))}connectedCallback(){this.isDisabled=!1,this.button=this.shadowRoot.querySelector(".button"),this.hasAttribute("disabled")&&!this.isDisabled&&(this.isDisabled=!0),this.addEventListener("click",n=>{this.dispatch()})}}); \ No newline at end of file +const smButton=document.createElement("template");smButton.innerHTML="\n\n
\n \n
",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button")}attributeChangedCallback(t,n,e){"disabled"===t?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}}); \ No newline at end of file diff --git a/components/dist/carousel.js b/components/dist/carousel.js index 75730a0..5981cc9 100644 --- a/components/dist/carousel.js +++ b/components/dist/carousel.js @@ -13,16 +13,14 @@ smCarousel.innerHTML = ` display: flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --arrow-left: 1rem; --arrow-right: 1rem; --arrow-top: auto; --arrow-bottom: auto; - --arrow-fill: rgba(var(--foreground-color), 1); - --arrow-background: rgba(var(--text-color), 1); - --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; + --nav-icon-fill: rgba(var(--background-color), 1); + --nav-background-color: rgba(var(--text-color), 1); + --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; --indicator-top: auto; --indicator-bottom: -1rem; --active-indicator-color: var(--accent-color); @@ -37,9 +35,9 @@ smCarousel.innerHTML = ` top: var(--arrow-top); bottom: var(--arrow-bottom); border: none; - background: var(--arrow-background); - -webkit-box-shadow: var(--arrow-box-shadow); - box-shadow: var(--arrow-box-shadow); + background: var(--nav-background-color); + -webkit-box-shadow: var(--nav-box-shadow); + box-shadow: var(--nav-box-shadow); -webkit-tap-highlight-color: transparent; transition: transform 0.3s; z-index: 1; @@ -64,7 +62,7 @@ button:focus-visible{ .icon { height: 1.5rem; width: 1.5rem; - fill: var(--arrow-fill); + fill: var(--nav-icon-fill); } .hide{ display: none !important; diff --git a/components/dist/carousel.min.js b/components/dist/carousel.min.js index a52d866..15df292 100644 --- a/components/dist/carousel.min.js +++ b/components/dist/carousel.min.js @@ -1 +1 @@ -const smCarousel=document.createElement("template");smCarousel.innerHTML='\n\n
\n \n
\n \n
\n \n
\n
\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("dot"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".dot")){const n=parseInt(t.target.closest(".dot").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>e.observe(t)),this.carouselItems.length>0?(o.observe(this.carouselItems[0]),i.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),o.disconnect(),i.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,e)=>{t.append(this.createIndicator(e)),n.dataset.rank=e}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},e=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,e){n!==e&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}}); \ No newline at end of file +const smCarousel=document.createElement("template");smCarousel.innerHTML='\n\n
\n \n
\n \n
\n \n
\n
\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("dot"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".dot")){const n=parseInt(t.target.closest(".dot").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>e.observe(t)),this.carouselItems.length>0?(i.observe(this.carouselItems[0]),o.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),i.disconnect(),o.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,e)=>{t.append(this.createIndicator(e)),n.dataset.rank=e}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},e=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,e){n!==e&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}}); \ No newline at end of file diff --git a/components/dist/checkbox.js b/components/dist/checkbox.js index 747a7de..eef1608 100644 --- a/components/dist/checkbox.js +++ b/components/dist/checkbox.js @@ -13,9 +13,7 @@ smCheckbox.innerHTML = ` display: inline-flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --height: 1.2rem; --width: 1.2rem; --border-radius: 0.2rem; @@ -61,7 +59,7 @@ smCheckbox.innerHTML = ` :host([checked]) .checkmark { stroke-dashoffset: 0; - stroke: rgba(var(--foreground-color), 1); + stroke: rgba(var(--background-color), 1); } :host([checked]) .icon { stroke-width: 8; diff --git a/components/dist/checkbox.min.js b/components/dist/checkbox.min.js index a6a9d30..8a053cf 100644 --- a/components/dist/checkbox.min.js +++ b/components/dist/checkbox.min.js @@ -1 +1 @@ -const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n\n',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyup(e){"Space"===e.code&&this.click()}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}}); \ No newline at end of file +const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n\n',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyup(e){"Space"===e.code&&this.click()}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}}); \ No newline at end of file diff --git a/components/dist/copy.js b/components/dist/copy.js index b4e8ea6..dd74e9a 100644 --- a/components/dist/copy.js +++ b/components/dist/copy.js @@ -13,9 +13,7 @@ smCopy.innerHTML = ` display: inline-flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --padding: 0; --background-color: inherit; --button-background-color: rgba(var(--text-color), 0.2); diff --git a/components/dist/copy.min.js b/components/dist/copy.min.js index fb1fad2..9493f78 100644 --- a/components/dist/copy.min.js +++ b/components/dist/copy.min.js @@ -1 +1 @@ -const smCopy=document.createElement("template");smCopy.innerHTML='\n\n\n
\n

\n \n
\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}}); \ No newline at end of file +const smCopy=document.createElement("template");smCopy.innerHTML='\n\n\n
\n

\n \n
\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}}); \ No newline at end of file diff --git a/components/dist/file-input.js b/components/dist/file-input.js index 94a008c..51132ce 100644 --- a/components/dist/file-input.js +++ b/components/dist/file-input.js @@ -9,11 +9,9 @@ fileInput.innerHTML = ` :host{ --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --border-radius: 0.3rem; - --button-color: var(--background-color); + --button-color: rgba(var(--background-color), 1); --button-font-weight: 500; --button-background-color: var(--accent-color); } diff --git a/components/dist/file-input.min.js b/components/dist/file-input.min.js index 7c177dd..4f71706 100644 --- a/components/dist/file-input.min.js +++ b/components/dist/file-input.min.js @@ -1 +1 @@ -const fileInput=document.createElement("template");fileInput.innerHTML='\n \t\n\t\n \t\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t
${n}
\n
${this.formatBytes(i)}
\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file +const fileInput=document.createElement("template");fileInput.innerHTML='\n \t\n\t\n \t\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t
${n}
\n
${this.formatBytes(i)}
\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file diff --git a/components/dist/hamburger-menu.js b/components/dist/hamburger-menu.js new file mode 100644 index 0000000..e4acb95 --- /dev/null +++ b/components/dist/hamburger-menu.js @@ -0,0 +1,187 @@ + +const hamburgerMenu = document.createElement('template') +hamburgerMenu.innerHTML = ` + +
+ +` +class HamburgerMenu extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }).append(hamburgerMenu.content.cloneNode(true)) + + this.resumeScrolling = this.resumeScrolling.bind(this) + this.open = this.open.bind(this) + this.close = this.close.bind(this) + + this.sideNav = this.shadowRoot.querySelector('.side-nav') + this.backdrop = this.shadowRoot.querySelector('.backdrop') + this.isOpen = false + + this.animeOptions = { + duration: 300, + easing: 'ease' + } + } + static get observedAttributes() { + return ['open']; + } + resumeScrolling() { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.style.overflow = 'auto'; + document.body.style.top = 'initial' + }, 300); + } + + open() { + if (this.isOpen) return + document.body.style.overflow = 'hidden'; + document.body.style.top = `-${window.scrollY}px` + this.classList.remove('hide') + this.sideNav.classList.add('reveal') + this.backdrop.classList.remove('hide') + this.backdrop.animate([ + { + opacity: 0 + }, + { + opacity: 1 + }, + ], + this.animeOptions) + .onfinish = () => { + this.isOpen = true + this.setAttribute('open', '') + } + + } + close() { + if (!this.isOpen) return + this.sideNav.classList.remove('reveal') + this.backdrop.animate([ + { + opacity: 1 + }, + { + opacity: 0 + }, + ], + this.animeOptions) + .onfinish = () => { + this.backdrop.classList.add('hide') + this.classList.add('hide') + this.isOpen = false + this.removeAttribute('open') + } + } + connectedCallback() { + this.backdrop.addEventListener('click', this.close) + const resizeObserver = new ResizeObserver(entries => { + if (window.innerWidth < 640 && this.isOpen) { + this.classList.remove('hide') + } + else { + this.classList.add('hide') + } + if (window.innerWidth > 640) { + this.classList.remove('hide') + } + }); + resizeObserver.observe(this) + } + + disconnectedCallback() { + this.backdrop.removeEventListener('click', this.close) + } + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'open') { + if (this.hasAttribute('open')) { + this.open() + } + } + } +} + +window.customElements.define('hamburger-menu', HamburgerMenu); \ No newline at end of file diff --git a/components/dist/hamburger-menu.min.js b/components/dist/hamburger-menu.min.js new file mode 100644 index 0000000..6fedc5c --- /dev/null +++ b/components/dist/hamburger-menu.min.js @@ -0,0 +1 @@ +const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n\n
\n\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu); \ No newline at end of file diff --git a/components/dist/input.js b/components/dist/input.js index eb31036..558d7eb 100644 --- a/components/dist/input.js +++ b/components/dist/input.js @@ -39,8 +39,7 @@ border: none; display: flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; + --background-color: 255, 255, 255; --success-color: #00C853; --danger-color: red; --width: 100%; @@ -168,7 +167,7 @@ input{ } :host(.outlined) .input { box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); } :host(.outlined) .label { width: max-content; @@ -180,7 +179,7 @@ input{ -ms-transform: translate(0.1rem, -1.5rem) scale(0.8); transform: translate(0.1rem, -1.5rem) scale(0.8); opacity: 1; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); } .animate-label:focus-within:not(.readonly) .label{ color: var(--accent-color) diff --git a/components/dist/input.min.js b/components/dist/input.min.js index b8d0edb..116ca39 100644 --- a/components/dist/input.min.js +++ b/components/dist/input.min.js @@ -1 +1 @@ -const smInput=document.createElement("template");smInput.innerHTML='\n\n
\n \n \n
\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.debounce=this.debounce.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,i)},e)}}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n \n ${this._errorText}\n `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}}); \ No newline at end of file +const smInput=document.createElement("template");smInput.innerHTML='\n\n
\n \n \n
\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.debounce=this.debounce.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,i)},e)}}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n \n ${this._errorText}\n `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}}); \ No newline at end of file diff --git a/components/dist/menu.js b/components/dist/menu.js index ababb1c..7b2725d 100644 --- a/components/dist/menu.js +++ b/components/dist/menu.js @@ -82,7 +82,7 @@ smMenu.innerHTML = ` -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; diff --git a/components/dist/menu.min.js b/components/dist/menu.min.js index 4b591af..3c37afa 100644 --- a/components/dist/menu.min.js +++ b/components/dist/menu.min.js @@ -1 +1 @@ -const smMenu=document.createElement("template");smMenu.innerHTML='\n\n
\n
\n \n options\n \n \n \n \n
\n
\n \n
\n
',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.expand=this.expand.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.open||(this.optionList.classList.remove("hide"),this.optionList.classList.add("no-transformations"),this.open=!0,this.icon.classList.add("focused"),this.availableOptions.forEach(n=>{n.setAttribute("tabindex","0")}))}collapse(){this.open&&(this.open=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide"),this.optionList.classList.remove("no-transformations"),this.availableOptions.forEach(n=>{n.removeAttribute("tabindex")}))}connectedCallback(){this.availableOptions,this.containerDimensions,this.optionList=this.shadowRoot.querySelector(".options");let n=this.shadowRoot.querySelector(".options slot"),t=this.shadowRoot.querySelector(".menu");this.icon=this.shadowRoot.querySelector(".icon"),this.open=!1,n.addEventListener("slotchange",t=>{this.availableOptions=n.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),t.addEventListener("click",n=>{this.open?this.collapse():this.expand()}),t.addEventListener("keydown",n=>{"ArrowDown"!==n.code&&"ArrowRight"!==n.code||(n.preventDefault(),this.availableOptions[0].focus()),"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.open?this.collapse():this.expand())}),this.optionList.addEventListener("keydown",n=>{"ArrowUp"!==n.code&&"ArrowRight"!==n.code||(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()),"ArrowDown"!==n.code&&"ArrowLeft"!==n.code||(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}),this.optionList.addEventListener("click",n=>{this.collapse()}),window.addEventListener("mousedown",n=>{this.contains(n.target)||2===n.button||this.collapse()})}});const smMenuOption=document.createElement("template");smMenuOption.innerHTML='\n\n
\n \n
',customElements.define("sm-menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenuOption.content.cloneNode(!0))}connectedCallback(){this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}}); \ No newline at end of file +const smMenu=document.createElement("template");smMenu.innerHTML='\n\n
\n
\n \n options\n \n \n \n \n
\n
\n \n
\n
',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.expand=this.expand.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.open||(this.optionList.classList.remove("hide"),this.optionList.classList.add("no-transformations"),this.open=!0,this.icon.classList.add("focused"),this.availableOptions.forEach(n=>{n.setAttribute("tabindex","0")}))}collapse(){this.open&&(this.open=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide"),this.optionList.classList.remove("no-transformations"),this.availableOptions.forEach(n=>{n.removeAttribute("tabindex")}))}connectedCallback(){this.availableOptions,this.containerDimensions,this.optionList=this.shadowRoot.querySelector(".options");let n=this.shadowRoot.querySelector(".options slot"),t=this.shadowRoot.querySelector(".menu");this.icon=this.shadowRoot.querySelector(".icon"),this.open=!1,n.addEventListener("slotchange",t=>{this.availableOptions=n.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),t.addEventListener("click",n=>{this.open?this.collapse():this.expand()}),t.addEventListener("keydown",n=>{"ArrowDown"!==n.code&&"ArrowRight"!==n.code||(n.preventDefault(),this.availableOptions[0].focus()),"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.open?this.collapse():this.expand())}),this.optionList.addEventListener("keydown",n=>{"ArrowUp"!==n.code&&"ArrowRight"!==n.code||(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()),"ArrowDown"!==n.code&&"ArrowLeft"!==n.code||(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}),this.optionList.addEventListener("click",n=>{this.collapse()}),window.addEventListener("mousedown",n=>{this.contains(n.target)||2===n.button||this.collapse()})}});const smMenuOption=document.createElement("template");smMenuOption.innerHTML='\n\n
\n \n
',customElements.define("sm-menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenuOption.content.cloneNode(!0))}connectedCallback(){this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}}); \ No newline at end of file diff --git a/components/dist/notifications.js b/components/dist/notifications.js index 39f4681..e1de534 100644 --- a/components/dist/notifications.js +++ b/components/dist/notifications.js @@ -13,8 +13,7 @@ smNotifications.innerHTML = ` display: flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; + --background-color: 255, 255, 255; --danger-color: red; --icon-height: 1.5rem; --icon-width: 1.5rem; @@ -46,7 +45,7 @@ smNotifications.innerHTML = ` display: flex; position: relative; border-radius: 0.3rem; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; diff --git a/components/dist/notifications.min.js b/components/dist/notifications.min.js index b927c02..cb9ddb4 100644 --- a/components/dist/notifications.min.js +++ b/components/dist/notifications.min.js @@ -1 +1 @@ -const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n
\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}createNotification(n,o){const{pinned:t=!1,icon:i=""}=o,e=document.createElement("div");e.classList.add("notification");let a="";return a+=`\n
${i}
\n

${n}

\n `,t&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,o={}){const t=this.createNotification(n,o);this.notificationPanel.append(t),t.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file +const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n
\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.classList.add("notification");let a="";return a+=`\n
${o}
\n

${n}

\n `,i&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file diff --git a/components/dist/popup.js b/components/dist/popup.js index 6cbe3d3..b29e06a 100644 --- a/components/dist/popup.js +++ b/components/dist/popup.js @@ -14,9 +14,7 @@ smPopup.innerHTML = ` z-index: 10; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --width: 100%; --height: auto; --min-width: auto; @@ -71,7 +69,7 @@ smPopup.innerHTML = ` -o-transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; transition: transform 0.3s; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; content-visibility: auto; diff --git a/components/dist/popup.min.js b/components/dist/popup.min.js index 66b746b..54587e8 100644 --- a/components/dist/popup.min.js +++ b/components/dist/popup.min.js @@ -1 +1 @@ -const smPopup=document.createElement("template");smPopup.innerHTML='\n\n\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.resumeScrolling=this.resumeScrolling.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.movePopup=this.movePopup.bind(this)}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t,e){return e&&(this.popupStack=e),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:t}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=t,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.inputFields.length&&setTimeout(()=>{this.inputFields.forEach(t=>{"radio"!==t.type&&"SM-CHECKBOX"!==t.tagName||(t.checked=!1),"SM-INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&"SM-TEXTAREA"!==t.tagName||(t.value="")})},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartYthis.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.pinned=!1,this.popupStack,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.offset,this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.threshold=.3*this.popup.getBoundingClientRect().height,this.hasAttribute("open")&&this.show(),this.popupContainer.addEventListener("mousedown",t=>{if(t.target===this.popupContainer&&!this.pinned){if(this.pinned)return void this.show();this.hide()}}),this.popupBodySlot.addEventListener("slotchange",()=>{setTimeout(()=>{this.threshold=.3*this.popup.getBoundingClientRect().height},200),this.inputFields=this.querySelectorAll("sm-input","sm-checkbox","textarea","sm-textarea","radio")}),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}}); \ No newline at end of file +const smPopup=document.createElement("template");smPopup.innerHTML='\n\n\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.resumeScrolling=this.resumeScrolling.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.movePopup=this.movePopup.bind(this)}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t,e){return e&&(this.popupStack=e),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:t}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=t,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.inputFields.length&&setTimeout(()=>{this.inputFields.forEach(t=>{"radio"!==t.type&&"SM-CHECKBOX"!==t.tagName||(t.checked=!1),"SM-INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&"SM-TEXTAREA"!==t.tagName||(t.value="")})},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartYthis.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.pinned=!1,this.popupStack,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.offset,this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.threshold=.3*this.popup.getBoundingClientRect().height,this.hasAttribute("open")&&this.show(),this.popupContainer.addEventListener("mousedown",t=>{if(t.target===this.popupContainer&&!this.pinned){if(this.pinned)return void this.show();this.hide()}}),this.popupBodySlot.addEventListener("slotchange",()=>{setTimeout(()=>{this.threshold=.3*this.popup.getBoundingClientRect().height},200),this.inputFields=this.querySelectorAll("sm-input","sm-checkbox","textarea","sm-textarea","radio")}),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}}); \ No newline at end of file diff --git a/components/dist/radio.js b/components/dist/radio.js index 190c8b6..65a29c8 100644 --- a/components/dist/radio.js +++ b/components/dist/radio.js @@ -10,9 +10,7 @@ smRadio.innerHTML = ` :host{ --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --gap: 0.5rem; --height: 1.4rem; } diff --git a/components/dist/radio.min.js b/components/dist/radio.min.js index eca9165..f9609a1 100644 --- a/components/dist/radio.min.js +++ b/components/dist/radio.min.js @@ -1 +1 @@ -const smRadio=document.createElement("template");smRadio.innerHTML='\n\n
\n \n \n \n
\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.options={bubbles:!0,composed:!0,detail:{value:this.value}}}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyup(t){"Space"===t.code&&this.handleClick()}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.value!==this.getAttribute("value")&&this.reset()}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}}); \ No newline at end of file +const smRadio=document.createElement("template");smRadio.innerHTML='\n\n
\n \n \n \n
\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.options={bubbles:!0,composed:!0,detail:{value:this.value}}}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyup(t){"Space"===t.code&&this.handleClick()}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.value!==this.getAttribute("value")&&this.reset()}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}}); \ No newline at end of file diff --git a/components/dist/select.js b/components/dist/select.js index 7520406..073b142 100644 --- a/components/dist/select.js +++ b/components/dist/select.js @@ -23,9 +23,7 @@ smSelect.innerHTML = ` display: inline-flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --max-height: auto; --min-width: 100%; } @@ -95,7 +93,7 @@ smSelect.innerHTML = ` flex-direction: column; min-width: var(--min-width); max-height: var(--max-height); - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); border: solid 1px rgba(var(--text-color), 0.2); border-radius: 0.3rem; z-index: 2; diff --git a/components/dist/select.min.js b/components/dist/select.min.js index 22dcad6..714a626 100644 --- a/components/dist/select.min.js +++ b/components/dist/select.min.js @@ -1 +1 @@ -const smSelect=document.createElement("template");smSelect.innerHTML='\n\n
\n
\n
\n \n \n \n
\n
\n \n
\n
',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.reset=this.reset.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e)}reset(){}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.open=!1})}connectedCallback(){this.availableOptions,this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle");let e,t=this.shadowRoot.querySelector(".options slot"),n=this.shadowRoot.querySelector(".selection");this.open=!1,this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},n.addEventListener("click",e=>{this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0)}),n.addEventListener("keydown",e=>{"ArrowDown"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),this.availableOptions[0].focus()),"Enter"!==e.code&&"Space"!==e.code||(this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0))}),this.optionList.addEventListener("keydown",e=>{"ArrowUp"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()),"ArrowDown"!==e.code&&"ArrowLeft"!==e.code||(e.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}),this.addEventListener("optionSelected",t=>{e!==t.target&&(this.setAttribute("value",t.detail.value),this.shadowRoot.querySelector(".option-text").textContent=t.detail.text,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:t.detail.value}})),e&&e.classList.remove("check-selected"),e=t.target),t.detail.switching||this.collapse(),t.target.classList.add("check-selected")}),t.addEventListener("slotchange",n=>{if(this.availableOptions=t.assignedElements(),this.availableOptions[0]){let t=this.availableOptions[0];e=t,t.classList.add("check-selected"),this.setAttribute("value",t.getAttribute("value")),this.shadowRoot.querySelector(".option-text").textContent=t.textContent,this.availableOptions.forEach((e,t)=>{e.setAttribute("data-rank",t+1),e.setAttribute("tabindex","0")})}}),document.addEventListener("mousedown",e=>{!this.contains(e.target)&&this.open&&this.collapse()})}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
\n \n \n \n \n
',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}sendDetails(e){let t=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{text:this.textContent,value:this.getAttribute("value"),switching:e}});this.dispatchEvent(t)}connectedCallback(){let e=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];this.addEventListener("click",e=>{this.sendDetails()}),this.addEventListener("keyup",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.sendDetails(!1)),e.includes(t.code)&&(t.preventDefault(),this.sendDetails(!0))}),this.hasAttribute("default")&&setTimeout(()=>{this.sendDetails()},0)}}); \ No newline at end of file +const smSelect=document.createElement("template");smSelect.innerHTML='\n\n
\n
\n
\n \n \n \n
\n
\n \n
\n
',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.reset=this.reset.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e)}reset(){}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.open=!1})}connectedCallback(){this.availableOptions,this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle");let e,t=this.shadowRoot.querySelector(".options slot"),n=this.shadowRoot.querySelector(".selection");this.open=!1,this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},n.addEventListener("click",e=>{this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0)}),n.addEventListener("keydown",e=>{"ArrowDown"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),this.availableOptions[0].focus()),"Enter"!==e.code&&"Space"!==e.code||(this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0))}),this.optionList.addEventListener("keydown",e=>{"ArrowUp"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()),"ArrowDown"!==e.code&&"ArrowLeft"!==e.code||(e.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}),this.addEventListener("optionSelected",t=>{e!==t.target&&(this.setAttribute("value",t.detail.value),this.shadowRoot.querySelector(".option-text").textContent=t.detail.text,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:t.detail.value}})),e&&e.classList.remove("check-selected"),e=t.target),t.detail.switching||this.collapse(),t.target.classList.add("check-selected")}),t.addEventListener("slotchange",n=>{if(this.availableOptions=t.assignedElements(),this.availableOptions[0]){let t=this.availableOptions[0];e=t,t.classList.add("check-selected"),this.setAttribute("value",t.getAttribute("value")),this.shadowRoot.querySelector(".option-text").textContent=t.textContent,this.availableOptions.forEach((e,t)=>{e.setAttribute("data-rank",t+1),e.setAttribute("tabindex","0")})}}),document.addEventListener("mousedown",e=>{!this.contains(e.target)&&this.open&&this.collapse()})}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
\n \n \n \n \n
',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}sendDetails(e){let t=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{text:this.textContent,value:this.getAttribute("value"),switching:e}});this.dispatchEvent(t)}connectedCallback(){let e=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];this.addEventListener("click",e=>{this.sendDetails()}),this.addEventListener("keyup",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.sendDetails(!1)),e.includes(t.code)&&(t.preventDefault(),this.sendDetails(!0))}),this.hasAttribute("default")&&setTimeout(()=>{this.sendDetails()},0)}}); \ No newline at end of file diff --git a/components/dist/sm-spinner.js b/components/dist/spinner.js similarity index 100% rename from components/dist/sm-spinner.js rename to components/dist/spinner.js diff --git a/components/dist/sm-spinner.min.js b/components/dist/spinner.min.js similarity index 100% rename from components/dist/sm-spinner.min.js rename to components/dist/spinner.min.js diff --git a/components/dist/strip-select.js b/components/dist/strip-select.js index d57e72a..200f9c7 100644 --- a/components/dist/strip-select.js +++ b/components/dist/strip-select.js @@ -10,9 +10,7 @@ stripSelect.innerHTML = ` :host{ --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; --gap: 0.5rem; } .hide{ diff --git a/components/dist/strip-select.min.js b/components/dist/strip-select.min.js index 841f345..ee5e41a 100644 --- a/components/dist/strip-select.min.js +++ b/components/dist/strip-select.min.js @@ -1 +1 @@ -const stripSelect=document.createElement("template");stripSelect.innerHTML='\n\n
\n
\n \n
\n \n
\n \n
\n
\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions,this._value,this.scrollDistance,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),o=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",s=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(r.observe(t.assignedElements()[0]),a.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),o.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(o.classList.add("hide"),n.classList.add("hide")):(o.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),o.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n\n\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file +const stripSelect=document.createElement("template");stripSelect.innerHTML='\n\n
\n
\n \n
\n \n
\n \n
\n
\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions,this._value,this.scrollDistance,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),o=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",s=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(r.observe(t.assignedElements()[0]),a.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),o.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(o.classList.add("hide"),n.classList.add("hide")):(o.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),o.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n\n\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file diff --git a/components/dist/switch.js b/components/dist/switch.js index 61b60b4..00a4736 100644 --- a/components/dist/switch.js +++ b/components/dist/switch.js @@ -14,9 +14,7 @@ smSwitch.innerHTML = ` display: inline-flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; } label{ display: -webkit-box; diff --git a/components/dist/switch.min.js b/components/dist/switch.min.js index 0e673ca..bf86326 100644 --- a/components/dist/switch.min.js +++ b/components/dist/switch.min.js @@ -1 +1 @@ -const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n\n',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||this.isDisabled||this.input.click()}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,t,e){t!==e&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}}); \ No newline at end of file +const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n\n',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||this.isDisabled||this.input.click()}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,t,e){t!==e&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}}); \ No newline at end of file diff --git a/components/dist/tabs.js b/components/dist/tabs.js index f7687b3..62b9cf0 100644 --- a/components/dist/tabs.js +++ b/components/dist/tabs.js @@ -13,9 +13,7 @@ smTabHeader.innerHTML = ` display: flex; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; } .tabs{ position: relative; @@ -71,7 +69,7 @@ smTabHeader.innerHTML = ` border-radius: 0.3rem; } :host([variant="tab"]) slot::slotted(.active){ - color: rgba(var(--foreground-color), 1); + color: rgba(var(--background-color), 1); } slot::slotted(.active){ color: var(--accent-color); diff --git a/components/dist/tabs.min.js b/components/dist/tabs.min.js index e3ae1fb..b3d32ec 100644 --- a/components/dist/tabs.min.js +++ b/components/dist/tabs.min.js @@ -1 +1 @@ -const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n\n
\n
\n \n
\n
\n
\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header")}sendDetails(t){this.dispatchEvent(new CustomEvent("switchtab",{bubbles:!0,detail:{target:this.target,rank:parseInt(t.getAttribute("rank"))}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.prevTab,this.allTabs,this.activeTab,this.isTab=!1,this.target=this.getAttribute("target"),this.hasAttribute("variant")&&"tab"===this.getAttribute("variant")&&(this.isTab=!0),this.tabSlot.addEventListener("slotchange",()=>{this.tabSlot.assignedElements().forEach((t,e)=>{t.setAttribute("rank",e)})}),this.allTabs=this.tabSlot.assignedElements(),this.tabSlot.addEventListener("click",t=>{t.target!==this.prevTab&&t.target.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.target.classList.add("active"),t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.target.getBoundingClientRect()),this.sendDetails(t.target),this.prevTab=t.target,this.activeTab=t.target)});let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.sendDetails(this.allTabs[0]),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}});const smTab=document.createElement("template");smTab.innerHTML='\n\n
\n\n
\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n\n
\n Nothing to see here.\n
\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.panelSlot=this.shadowRoot.querySelector("slot")}connectedCallback(){let t=[{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],e=[{opacity:0,transform:"translateX(1rem)"},{opacity:1,transform:"none"}],n=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(-1rem)"}],a=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(1rem)"}],i={duration:300,fill:"forwards",easing:"ease"};this.prevPanel,this.allPanels,this.previousRank,this.panelSlot.addEventListener("slotchange",()=>{this.panelSlot.assignedElements().forEach(t=>{t.classList.add("hide-completely")})}),this.allPanels=this.panelSlot.assignedElements(),this._targetBodyFlyRight=(t=>{t.classList.remove("hide-completely"),t.animate(e,i)}),this._targetBodyFlyLeft=(e=>{e.classList.remove("hide-completely"),e.animate(t,i)}),document.addEventListener("switchtab",t=>{if(t.detail.target===this.id){if(this.prevPanel){let e=this.allPanels[t.detail.rank],s=this.prevPanel;this.previousRank{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyRight(e):s&&e&&(s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyRight(e)})):s&&!e?s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyLeft(e):s&&e&&(s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyLeft(e)}))}else this.allPanels[t.detail.rank].classList.remove("hide-completely");this.previousRank=t.detail.rank,this.prevPanel=this.allPanels[t.detail.rank]}})}}); \ No newline at end of file +const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n\n
\n
\n \n
\n
\n
\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header")}sendDetails(t){this.dispatchEvent(new CustomEvent("switchtab",{bubbles:!0,detail:{target:this.target,rank:parseInt(t.getAttribute("rank"))}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.prevTab,this.allTabs,this.activeTab,this.isTab=!1,this.target=this.getAttribute("target"),this.hasAttribute("variant")&&"tab"===this.getAttribute("variant")&&(this.isTab=!0),this.tabSlot.addEventListener("slotchange",()=>{this.tabSlot.assignedElements().forEach((t,e)=>{t.setAttribute("rank",e)})}),this.allTabs=this.tabSlot.assignedElements(),this.tabSlot.addEventListener("click",t=>{t.target!==this.prevTab&&t.target.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.target.classList.add("active"),t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.target.getBoundingClientRect()),this.sendDetails(t.target),this.prevTab=t.target,this.activeTab=t.target)});let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.sendDetails(this.allTabs[0]),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}});const smTab=document.createElement("template");smTab.innerHTML='\n\n
\n\n
\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n\n
\n Nothing to see here.\n
\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.panelSlot=this.shadowRoot.querySelector("slot")}connectedCallback(){let t=[{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],e=[{opacity:0,transform:"translateX(1rem)"},{opacity:1,transform:"none"}],n=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(-1rem)"}],a=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(1rem)"}],i={duration:300,fill:"forwards",easing:"ease"};this.prevPanel,this.allPanels,this.previousRank,this.panelSlot.addEventListener("slotchange",()=>{this.panelSlot.assignedElements().forEach(t=>{t.classList.add("hide-completely")})}),this.allPanels=this.panelSlot.assignedElements(),this._targetBodyFlyRight=(t=>{t.classList.remove("hide-completely"),t.animate(e,i)}),this._targetBodyFlyLeft=(e=>{e.classList.remove("hide-completely"),e.animate(t,i)}),document.addEventListener("switchtab",t=>{if(t.detail.target===this.id){if(this.prevPanel){let e=this.allPanels[t.detail.rank],s=this.prevPanel;this.previousRank{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyRight(e):s&&e&&(s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyRight(e)})):s&&!e?s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyLeft(e):s&&e&&(s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyLeft(e)}))}else this.allPanels[t.detail.rank].classList.remove("hide-completely");this.previousRank=t.detail.rank,this.prevPanel=this.allPanels[t.detail.rank]}})}}); \ No newline at end of file diff --git a/components/dist/tags-input.js b/components/dist/tags-input.js index fbca371..40cbf5b 100644 --- a/components/dist/tags-input.js +++ b/components/dist/tags-input.js @@ -9,8 +9,7 @@ tagsInput.innerHTML = ` :host{ --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; + --background-color: 255, 255, 255; --danger-color: red; --border-radius: 0.3rem; } diff --git a/components/dist/tags-input.min.js b/components/dist/tags-input.min.js index 2b611fe..9a07d6b 100644 --- a/components/dist/tags-input.min.js +++ b/components/dist/tags-input.min.js @@ -1 +1 @@ -const tagsInput=document.createElement("template");tagsInput.innerHTML='\n \n
\n \n

\n
\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(e){const t=e.target.value.trim().length;e.target.setAttribute("size",t||"3"),t?this.placeholder.classList.add("hide"):t||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(e){if(","!==e.key&&"/"!==e.key||e.preventDefault(),""!==e.target.value.trim()){if("Enter"===e.key||","===e.key||"/"===e.key||"Space"===e.code){const t=e.target.value.trim();if(this.tags.has(t))this.tagsWrapper.querySelector(`[data-value="${t}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n ${t}\n \n `,this.input.before(e),this.tags.add(t)}if(e.target.value="",e.target.setAttribute("size","3"),this.limit&&this.limitthis.tags.size&&(this.input.readOnly=!1)}handleClick(e){e.target.closest(".tag")?this.removeTag(e.target.closest(".tag")):this.input.focus()}removeTag(e){this.tags.delete(e.dataset.value),e.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){"placeholder"===e&&(this.placeholder.textContent=n),"limit"===e&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}}); \ No newline at end of file +const tagsInput=document.createElement("template");tagsInput.innerHTML='\n \n
\n \n

\n
\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(e){const t=e.target.value.trim().length;e.target.setAttribute("size",t||"3"),t?this.placeholder.classList.add("hide"):t||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(e){if(","!==e.key&&"/"!==e.key||e.preventDefault(),""!==e.target.value.trim()){if("Enter"===e.key||","===e.key||"/"===e.key||"Space"===e.code){const t=e.target.value.trim();if(this.tags.has(t))this.tagsWrapper.querySelector(`[data-value="${t}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n ${t}\n \n `,this.input.before(e),this.tags.add(t)}if(e.target.value="",e.target.setAttribute("size","3"),this.limit&&this.limitthis.tags.size&&(this.input.readOnly=!1)}handleClick(e){e.target.closest(".tag")?this.removeTag(e.target.closest(".tag")):this.input.focus()}removeTag(e){this.tags.delete(e.dataset.value),e.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){"placeholder"===e&&(this.placeholder.textContent=n),"limit"===e&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}}); \ No newline at end of file diff --git a/components/dist/text-field.js b/components/dist/text-field.js index 814c80e..4c6deeb 100644 --- a/components/dist/text-field.js +++ b/components/dist/text-field.js @@ -9,9 +9,7 @@ textField.innerHTML = ` :host{ --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --danger-color: red; + --background-color: 255, 255, 255; } .text-field{ display: flex; diff --git a/components/dist/text-field.min.js b/components/dist/text-field.min.js index 1eba644..33b9621 100644 --- a/components/dist/text-field.min.js +++ b/components/dist/text-field.min.js @@ -1 +1 @@ -const textField=document.createElement("template");textField.innerHTML='\n\n
\n
\n
\n \n Edit\n \n \n \n Save\n \n \n
\n
\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.saveButton=this.textField.querySelector(".save-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("contentchanged",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.classList.add("hide")}),setTimeout(()=>{this.saveButton.classList.remove("hide"),this.saveButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)),this.saveButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.saveButton.classList.add("hide")}),setTimeout(()=>{this.editButton.classList.remove("hide"),this.editButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1)}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,this.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable))}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable)}}); \ No newline at end of file +const textField=document.createElement("template");textField.innerHTML='\n\n
\n
\n
\n \n Edit\n \n \n \n Save\n \n \n
\n
\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.saveButton=this.textField.querySelector(".save-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("contentchanged",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.classList.add("hide")}),setTimeout(()=>{this.saveButton.classList.remove("hide"),this.saveButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)),this.saveButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.saveButton.classList.add("hide")}),setTimeout(()=>{this.editButton.classList.remove("hide"),this.editButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1)}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,this.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable))}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable)}}); \ No newline at end of file diff --git a/components/dist/textarea.js b/components/dist/textarea.js index 597fe29..084a560 100644 --- a/components/dist/textarea.js +++ b/components/dist/textarea.js @@ -19,8 +19,7 @@ smTextarea.innerHTML = ` display: grid; --accent-color: #4d2588; --text-color: 17, 17, 17; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; + --background-color: 255, 255, 255; --danger-color: red; --border-radius: 0.3rem; --background: rgba(var(--text-color), 0.06); @@ -30,7 +29,7 @@ smTextarea.innerHTML = ` } :host(.outlined) .textarea { box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--background-color), 1); } .textarea{ display: grid; diff --git a/components/dist/textarea.min.js b/components/dist/textarea.min.js index 8c21e16..92856ae 100644 --- a/components/dist/textarea.min.js +++ b/components/dist/textarea.min.js @@ -1 +1 @@ -const smTextarea=document.createElement("template");smTextarea.innerHTML='\n\n\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}}); \ No newline at end of file +const smTextarea=document.createElement("template");smTextarea.innerHTML='\n\n\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}}); \ No newline at end of file diff --git a/components/index.html b/components/index.html index ff9b5a1..792e434 100644 --- a/components/index.html +++ b/components/index.html @@ -21,7 +21,7 @@
-
- +
@@ -80,15 +80,15 @@ Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.

- Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall.especially since we are a framework-less development environment so this was a logical choice. + Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.

- Just download the components you like, link them with a script tag and drop it in HTML done!. + Just download the components you like, link them with a script tag and drop it in HTML done!

Features

  • Native and Cross framework support
    • -
  • Standalone functionality
    • +
  • Encapsulated style and functionality
  • Easy styling
  • Adaptive scaling
@@ -109,7 +109,7 @@
  • - Link the downloaded js with <script src=".../components.js"></script> at bottom of your HTML file just before </body> tag. + Link the downloaded js with <script src=".../components.js"></script> at bottom of your HTML file just before </body> tag.
    • @@ -130,34 +130,156 @@

    Global styling

    - +

    These components use CSS variables to customize styling. they share some CSS variables that make global styling easier.

    +

    Some common CSS variables and their use

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    VariableUse
    --accent-colorColor which will be used for denoting active state
    --text-color + default text color for all components.
    + ( Use comma separated rgb values. e.g 17, 17, 17 ) +
    --background-color + default background color for all components.
    + ( Use comma separated rgb values. e.g 255, 255, 255 ) +
    --danger-colorUsed for error/invalid state

    Buttons

    -

    - Buttons are used in various basic UI interactions to perform an action. -

    - default - primary - outlined - no-outline - disabled +

    sm-button has 3 variants that define how the button looks.

    + + + + + + + + + + + + + + + + + + + + + +
    Variant typeExample
    primary + Primary +
    outlined + Outlined +
    no--outline + No outline +
    +

    How to define variant

                         
-                        <sm-button>default</sm-button>
                         <sm-button variant="primary">primary</sm-button>
                         <sm-button variant="outlined">outlined</sm-button>
                         <sm-button variant="no-outline">no-outline</sm-button>
-                        <sm-button variant="primary" disabled>disabled</sm-button>
    + +

    States

    +

    Disabled

    +

    To disable the button add disabled attribute.

    + Disabled + 
    +                    
+                        <sm-button disabled>Disabled</sm-button>
+                    
+
    +

    Attributes

    +

    All the native HTML checkbox attributes are valid

    + + + + + + + + + + + + + + + + + +
    AttributeDescription
    disabled (boolean) + Button is disabled by default. all the interactions are disabled +
    type (string) + Has values submit reset
    + Can only used withing sm-form to submit or reset the form. +
    + +

    Styling

    +

    CSS variables used to style this component

    + + + + + + + + + + + + + + + + + + + + + +
    VariableDescription
    --background + Define background of button. accepts all values of CSS background property +
    --border-radius + Set curvature at button corners +
    --padding + Specify padding of button +

    Carousel

    - To start using SM Components + Carousel is a very common UI component primarily used to display images or slides. + This carousel switches user interactions based on type of input devices present. For hover capable devices slides can be scrolled with buttons and on + touch enabled devices swipe can be used.

    +

    Interactive demo

    Title

    @@ -176,19 +298,183 @@

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

     +

    Markup for above carousel

    + 
    +                    
+                        <sm-carousel align-items="start" indicator> ...carousel items... </sm-carousel>
+                    
+
    +

    Custom attributes

    +

    These attributes cane used to customize carousel behaviour and features

    + + + + + + + + + + + + + + + + + +
    AttributeDescription
    align-items + Has values start + center end + Specifies how carousel items should align. default is center. +
    indicator (boolean) + if added carousel shows dot indicators of carousel items. +
    + +

    Styling

    +

    CSS variables used to style this component

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    VariableDescription
    --active-indicator-color + Defines background color of active slide indicator +
    --nav-background-color + Defines background color of carousel navigation buttons +
    --nav-box-shadow + Defines box shadow of carousel navigation buttons +
    --nav-icon-fill + Defines fill of arrow icon on carousel navigation buttons +

    Checkbox

    -

    - To start using SM Components -

    - +

    sm-checkbox supports all the attributes of native HTML5 checkbox

    + + linking some HTML element with sm-checbox using label tag won't work.
    + Add the element inside the opening and closing checkbox tag. +     +

    Interactive demo

    + +
    + Check this box +
    +     + +

    States

    +

    Disabled

    +

    To disable the checkbox add disabled attribute.

    + +
    + Disabled checkbox +
    +     + 
    +                    
+                        <sm-checkbox  disabled>
+                            <div style="margin-left: 0.5rem;">Disabled checkbox</div>
+                        </sm-checkbox>           
+                    
+
    + +

    Checked

    +

    To make checkbox checked by default add checked attribute.

    + +
    + Checked checkbox +
    +     + 
    +                    
+                        <sm-checkbox  checked>
+                            <div style="margin-left: 0.5rem;">Checked checkbox</div>
+                        </sm-checkbox>           
+                    
+
    + +

    Attributes

    +

    All the native HTML checkbox attributes are valid

    + + + + + + + + + + + + + + + + + + + + + +
    AttributeDescription
    checked (boolean) + Sets checked state as default if added +
    disabled (boolean) + Checkbox is disabled by default. all the interactions are disabled +
    value (string) + Sets value of checkbox which can be accessed by value property with JS +
    + +

    Styling

    +

    CSS variables used to style this component

    + + + + + + + + + + + + + + + + + + + + + +
    VariableDescription
    --border-radius + Defines border-radius of checkbox square +
    --height + Defines height of checkbox +
    --width + Defines width of checkbox +
    @@ -219,6 +505,11 @@

    +
    +

    Hamburger menu

    + + +

    Input

    @@ -312,7 +603,7 @@

    Select

    - <sm-select> is very similar to starndatd HTML5 select and it's markup stucture is + <sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.

    @@ -324,7 +615,7 @@

    Spinner

    - <sm-select> is very similar to starndatd HTML5 select and it's markup stucture is + <sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.

    @@ -420,13 +711,14 @@ + - + @@ -818,6 +1110,10 @@ name: 'Form', pageId: 'form_page' }, + { + name: 'Hamburger menu', + pageId: 'hamburger_menu_page' + }, { name: 'Input', pageId: 'input_page' @@ -871,42 +1167,6 @@ pageId: 'text_field_page' }, ] - function sideNav(show = true) { - if (show) { - getRef('side_nav').classList.add('reveal') - getRef('backdrop').classList.remove('hide-completely') - getRef('backdrop').animate([ - { - opacity: 0 - }, - { - opacity: 1 - }, - ], - { - duration: 300, - easing: 'ease' - }) - } - else { - getRef('side_nav').classList.remove('reveal') - getRef('backdrop').animate([ - { - opacity: 1 - }, - { - opacity: 0 - }, - ], - { - duration: 300, - easing: 'ease' - }) - .onfinish = () => { - getRef('backdrop').classList.add('hide-completely') - } - } - } function renderComponentList() { const itemsFrag = document.createDocumentFragment()