From 019addd8555faededf390696c7e9a433f3a924f4 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sun, 4 Sep 2022 17:37:45 +0530 Subject: [PATCH] Feature and bug fixing update --- components/css/main.css | 95 +-- components/css/main.css.map | 1 - components/css/main.min.css | 2 +- components/css/main.scss | 893 +++++++++++++------------- components/dist/button.js | 2 +- components/dist/button.min.js | 2 +- components/dist/carousel.js | 19 +- components/dist/carousel.min.js | 2 +- components/dist/checkbox.js | 13 +- components/dist/checkbox.min.js | 2 +- components/dist/color-grid.js | 150 +++++ components/dist/color-grid.min.js | 1 + components/dist/copy.js | 23 +- components/dist/copy.min.js | 2 +- components/dist/file-input.js | 11 +- components/dist/file-input.min.js | 2 +- components/dist/form.js | 72 ++- components/dist/form.min.js | 2 +- components/dist/hamburger-menu.js | 9 +- components/dist/hamburger-menu.min.js | 2 +- components/dist/input.js | 433 +++++++------ components/dist/input.min.js | 2 +- components/dist/notifications.js | 450 ++++++++----- components/dist/notifications.min.js | 2 +- components/dist/pin-input.js | 232 +++++++ components/dist/popup.js | 28 +- components/dist/popup.min.js | 2 +- components/dist/radio.js | 13 +- components/dist/radio.min.js | 2 +- components/dist/select.js | 72 ++- components/dist/select.min.js | 2 +- components/dist/spinner.js | 11 +- components/dist/spinner.min.js | 2 +- components/dist/strip-select.js | 59 +- components/dist/strip-select.min.js | 2 +- components/dist/switch.js | 14 +- components/dist/switch.min.js | 2 +- components/dist/tabs.js | 9 +- components/dist/tabs.min.js | 2 +- components/dist/tags-input.js | 17 +- components/dist/tags-input.min.js | 2 +- components/dist/text-field.js | 126 ++-- components/dist/textarea.js | 209 +++--- components/dist/textarea.min.js | 2 +- components/dist/theme-toggle.js | 4 +- components/dist/theme-toggle.min.js | 2 +- components/index.html | 6 +- components/index.min.html | 6 +- 48 files changed, 1774 insertions(+), 1244 deletions(-) delete mode 100644 components/css/main.css.map create mode 100644 components/dist/color-grid.js create mode 100644 components/dist/color-grid.min.js create mode 100644 components/dist/pin-input.js diff --git a/components/css/main.css b/components/css/main.css index dc76604..670b75c 100644 --- a/components/css/main.css +++ b/components/css/main.css @@ -6,48 +6,50 @@ } :root { - font-size: clamp(1rem, 1.2vmax, 3rem); + font-size: clamp(1rem, 1.2vmax, 1.2rem); } -html, body { +html, +body { height: 100%; - scroll-behavior: smooth; } body { + --accent-color: #0d7377; + --secondary-color: #ffac2e; + --text-color: 20, 20, 20; + --foreground-color: 252, 253, 255; + --background-color: 241, 243, 248; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: rgb(220, 165, 0); color: rgba(var(--text-color), 1); - background: rgba(var(--background-color), 1); -} -body, -body * { - --accent-color: #0D7377; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; - --danger-color: red; + background-color: rgba(var(--background-color), 1); + overflow-y: hidden; } -body[data-theme=dark], -body[data-theme=dark] * { - --accent-color: #32E0C4; - --text-color: 240, 240, 240; - --text-color-light: 170, 170, 170; - --background-color: 10, 10, 10; +body[data-theme=dark] { + --accent-color: #32e0c4; + --secondary-color: #d60739; + --text-color: 220, 220, 220; + --foreground-color: 27, 28, 29; + --background-color: 21, 22, 22; --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: rgb(255, 213, 5); } -p { - font-size: 0.8; +p, +strong { + font-size: 0.9rem; max-width: 65ch; line-height: 1.7; - margin-bottom: 1.5rem; - color: rgba(var(--text-color), 0.8); -} -p:not(:last-of-type) { - margin-bottom: 1rem; + color: rgba(var(--text-color), 0.9); } img { - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; } a { @@ -64,6 +66,14 @@ button { background-color: inherit; } +a:-webkit-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a:-moz-any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + a:any-link:focus-visible { outline: rgba(var(--text-color), 1) 0.1rem solid; } @@ -139,8 +149,6 @@ ul { word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; - -ms-hyphens: auto; - -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } @@ -282,10 +290,12 @@ ul { } .ripple { + height: 8rem; + width: 8rem; position: absolute; border-radius: 50%; transform: scale(0); - background: rgba(var(--text-color), 0.16); + background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%); pointer-events: none; } @@ -326,18 +336,18 @@ ul { .token.prolog, .token.doctype, .token.cdata { - color: #50CB93; + color: #50cb93; } .token.punctuation, .token.tag { - color: #29B6F6; + color: #29b6f6; } .token.attr-name, .token.namespace, .token.deleted { - color: #1DE9B6; + color: #1de9b6; } .token.function-name { @@ -362,7 +372,7 @@ ul { .token.atrule, .token.keyword, .token.builtin { - color: #FF6767; + color: #ff6767; } .token.string, @@ -370,7 +380,7 @@ ul { .token.attr-value, .token.regex, .token.variable { - color: #84FFFF; + color: #84ffff; } .token.operator, @@ -429,7 +439,10 @@ pre code { width: 100%; } -h1, h2, h3, h4.h5 { +h1, +h2, +h3, +h4.h5 { font-family: "Poppins", sans-serif; } @@ -574,8 +587,10 @@ strong.important { } .screenshot { - object-fit: cover; - object-position: top; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: top; + object-position: top; height: 30rem; width: 16rem; border-radius: 1rem; @@ -593,21 +608,17 @@ strong.important { sm-popup { --width: 32rem; } - #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; @@ -615,11 +626,9 @@ strong.important { .right > * { grid-column: 2/3; } - .page__title { font-size: 2.5rem; } - #overview_page { display: grid; gap: 1.5rem; @@ -638,7 +647,6 @@ strong.important { width: 0.5rem; height: 0.5rem; } - ::-webkit-scrollbar-thumb { background: rgba(var(--text-color), 0.3); border-radius: 1rem; @@ -646,7 +654,6 @@ strong.important { ::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-color), 0.5); } - .list__item:hover { background: rgba(var(--text-color), 0.1); cursor: pointer; diff --git a/components/css/main.css.map b/components/css/main.css.map deleted file mode 100644 index fb02e7c..0000000 --- a/components/css/main.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAQ,gGAAA;AACA,iGAAA;AACA,gFAAA;AACR;EACI,sBAAA;EACA,UAAA;EACA,SAAA;EACA,iCAAA;AACJ;;AACA;EACI,uBAAA;AAEJ;;AAAA;EACI,uBAAA;EACA,wCAAA;EACA,wBAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;AAGJ;;AAGA;EAAsB,cAAA;AACtB;;AADwC,oBAAA;AACxC;EAAsB,cAAA;AAKtB;;AALwC,wBAAA;AACxC;EAAsB,cAAA;EAAgB,kBAAA;AAUtC;;AAV4D,mBAAA;AAC5D;EAAsB,cAAA;AActB;;AAdwC,sBAAA;AACxC;EAAsB,cAAA;AAkBtB;;AAlBwC,YAAA;AACxC;EAAsB,WAAA;AAsBtB;;AAtBqC,gBAAA;AACrC;EAAsB,WAAA;AA0BtB;;AA1BqC,cAAA;AACrC;EAAsB,cAAA;AA8BtB;;AA9BwC,iBAAA;AACxC;EAAsB,cAAA;AAkCtB;;AAlCwC,4BAAA;AACxC;EAAsB,cAAA;AAsCtB;;AAtCwC,4BAAA;AACxC;EAAsB,cAAA;AA0CtB;;AA1CwC,mBAAA;AAExC;EACC,cAAA;EACG,iBAAA;EACA,qBAAA;EACA,qBAAA;EACA,yCAAA;AA4CJ;;AA1CA;EACI,qCAAA;EACA,qBAAA;EACA,gBAAA;EACA,sBAAA;EACA,yCAAA;AA6CJ;;AA3CA;EACI,qCAAA;AA8CJ;;AA5CA;EACI,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,WAAA;AA+CJ;;AA1CA;EACI,aAAA;AA6CJ;;AA3CA;EACI,kCAAA;EACA,gBAAA;AA8CJ;;AA5CA;EACI,qBAAA;EACA,0BAAA;AA+CJ;;AAjDA;EACI,qBAAA;EACA,0BAAA;AA+CJ;;AAjDA;EACI,qBAAA;EACA,0BAAA;AA+CJ;;AA7CA;EACE,qBAAA;EACA,0BAAA;AAgDF;AA/CE;EACI,gBAAA;AAiDN;;AA9CA;EACI,iCAAA;AAiDJ;;AA/CA;EACI,aAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,sBAAA;EACA,kBAAA;EACA,iCAAA;EACA,aAAA;EACA,qDAAA;AAkDJ;AAjDI;EACI,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,UAAA;EACA,yBAAA;EACA,sBAAA;AAmDR;AAjDI;EACI,UAAA;EACA,gBAAA;EACA,kBAAA;AAmDR;AAjDI;EACI,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,8CAAA;EACA,WAAA;EACA,WAAA;EACA,wBAAA;EACA,sCAAA;EACA,WAAA;AAmDR;AAjDI;EACI,gBAAA;EACA,gBAAA;AAmDR;AAjDI;EACI,gBAAA;AAmDR;AAjDI;EACI,kBAAA;AAmDR;;AAhDA;EACI,aAAA;AAmDJ;;AAjDA;EACI,uBAAA;EACA,kBAAA;EACA,mCAAA;EACA,eAAA;AAoDJ;AAnDI;EACI,0BAAA;AAqDR;;AAlDA;EACI,oBAAA;AAqDJ;AApDI;EACI,mBAAA;AAsDR;AArDQ;EACI,gBAAA;AAuDZ;AArDQ;EACI,0BAAA;AAuDZ;;AAnDA;EACI,gBAAA;EACA,gBAAA;AAsDJ;AArDI;EACI,eAAA;AAuDR;;AApDA;EACI,eAAA;AAuDJ;AAtDI;EACI,qBAAA;AAwDR;;AArDA;EACI,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;AAwDJ;AAvDI;EACI,sBAAA;EACA,0BAAA;AAyDR;AAvDI;EACI,0BAAA;EACA,yCAAA;AAyDR;;AAtDA;EACI,aAAA;EACA,aAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;AAyDJ;;AAvDA;EACI,mBAAA;AA0DJ;;AAxDA;EACI,qBAAA;AA2DJ;;AAzDA;EACI;IACI,aAAA;IACA,2CAAA;IACA,WAAA;EA4DN;;EA1DE;IACI,eAAA;EA6DN;;EA3DE;IACI,uBAAA;IACA,sBAAA;EA8DN;AACF;AA5DA;EACI;IACI,eAAA;IACA,UAAA;IACA,sCAAA;IACA,4CAAA;IACA,aAAA;IACA,4BAAA;EA8DN;AACF;AA5DA;EACI;IACI,wCAAA;IACA,eAAA;EA8DN;AACF","file":"main.css"} \ No newline at end of file diff --git a/components/css/main.min.css b/components/css/main.min.css index a16bf9d..21c25b7 100644 --- a/components/css/main.min.css +++ b/components/css/main.min.css @@ -1 +1 @@ -p,strong{max-width:65ch}p,pre{line-height:1.7}.screenshot,img{object-fit:cover}.highlight,button{display:inline-flex}.list,ul{list-style:none}.hide,.ripple{pointer-events: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{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{border:none;background-color:inherit}.table,.tr{display:grid}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.table{gap:.5rem;margin:1rem 0;position:relative;text-align:left;overflow-x:auto;border-radius:.3rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color),.04)}.table p:only-of-type{margin-bottom:0}.tr{gap:1rem;padding:1rem;grid-template-columns:11rem 1fr;width:100%}.tr:nth-of-type(odd){background-color:rgba(var(--text-color),.04)}.tr p{min-width:30ch}.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,h2{text-transform:capitalize}.flex{display:flex}.grid,main{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}.auto-grid-2,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.auto-grid-2,.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,.list{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{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.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}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#50CB93}.token.punctuation,.token.tag{color:#29B6F6}.token.attr-name,.token.deleted,.token.namespace{color:#1DE9B6}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#FF6767}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#84FFFF}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}code,code *{color:rgba(255,255,255,.9)}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;font-size:.9rem;font-weight:500;white-space:pre;border-radius:.5rem;background:rgba(0,0,0,.9)}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}main{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}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;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,sm-tab-header{margin-bottom:1.5rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{flex-direction:column;margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch}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}.highlight{font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color),.1);border-radius:.2rem;padding:.1rem .5rem;font-size:.9rem;line-height:1.6}#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}.auto-grid-2{justify-items:center;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}.screenshot{object-position:top;height:30rem;width:16rem;border-radius:1rem;justify-self:center;box-shadow:0 .5rem 1.5rem -.5rem rgba(0,0,0,.3),0 0 0 .3rem #000}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){sm-popup{--width:32rem}#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 +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #0d7377;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);overflow-y:hidden}body[data-theme=dark]{--accent-color: #32e0c4;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{-o-object-fit:cover;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:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.3rem}ul{list-style:none}.table{display:grid;gap:.5rem;margin:1rem 0;position:relative;text-align:left;overflow-x:auto;border-radius:.3rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color), 0.04)}.table p:only-of-type{margin-bottom:0}.tr{display:grid;gap:1rem;padding:1rem;grid-template-columns:11rem 1fr;width:100%}.tr:nth-of-type(odd){background-color:rgba(var(--text-color), 0.04)}.tr p{min-width:30ch}.flex{display:flex}.grid{display:grid}.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;-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{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), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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), 0.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#50cb93}.token.punctuation,.token.tag{color:#29b6f6}.token.attr-name,.token.namespace,.token.deleted{color:#1de9b6}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#ff6767}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#84ffff}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;font-size:.9rem;font-weight:500;white-space:pre;border-radius:.5rem;background:rgba(0,0,0,.9);line-height:1.7}code{border-radius:.3rem;font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color), 0.1);color:rgba(255,255,255,.9)}code *{color:rgba(255,255,255,.9);font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:none;width:100%}h1,h2,h3,h4.h5{font-family:"Poppins",sans-serif}h2{margin:3rem 0 1rem 0;text-transform:capitalize}main{display:grid;height:100%}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color), 0.1)}#side_nav_button{padding:.5rem;margin-left:-0.5rem}.right{max-height:100%;overflow-y:auto}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{list-style:none;display:flex;flex-direction:column;margin-bottom:.8rem}.list__item{display:flex;padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color), 0.06)}.card{display:flex;flex-direction:column;margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color), 0.06)}sm-carousel{margin-bottom:1rem}sm-tab-header{margin-bottom:1.5rem}.page{display:flex;flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:1.5rem}ol li{margin-bottom:1rem}ol li:last-of-type{margin-bottom:0}strong{max-width:65ch}strong.important{display:flex;padding:.5rem;margin:.5rem 0;border-radius:.3rem;color:rgba(0,0,0,.8);background-color:khaki}.highlight{display:inline-flex;font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color), 0.1);border-radius:.2rem;padding:.1rem .5rem;font-size:.9rem;line-height:1.6}#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 0}.comp-checkbox__title{margin-left:.5rem}.auto-grid-2{justify-content:center;justify-items:center;text-align:center;grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr))}.screenshot{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:30rem;width:16rem;border-radius:1rem;justify-self:center;box-shadow:0 .5rem 1.5rem -0.5rem rgba(0,0,0,.3),0 0 0 .3rem #000}@media screen and (max-width: 640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width: 640px){sm-popup{--width: 32rem}#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), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.list__item:hover{background:rgba(var(--text-color), 0.1);cursor:pointer}} \ No newline at end of file diff --git a/components/css/main.scss b/components/css/main.scss index 1e3a9d0..8b45057 100644 --- a/components/css/main.scss +++ b/components/css/main.scss @@ -1,271 +1,280 @@ -*{ - padding: 0; - margin: 0; - box-sizing: border-box; - font-family: 'Roboto', sans-serif; +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; } -:root{ - font-size: clamp(1rem, 1.2vmax, 3rem); -} -html, body{ - height: 100%; - scroll-behavior: smooth; + +:root { + font-size: clamp(1rem, 1.2vmax, 1.2rem); } + +html, body { - color: rgba(var(--text-color), 1); - background: rgba(var(--background-color), 1); - &, - *{ - --accent-color: #0D7377; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; - --danger-color: red; - } - -} -body[data-theme='dark']{ - &, - *{ - --accent-color: #32E0C4; - --text-color: 240, 240, 240; - --text-color-light: 170, 170, 170; - --background-color: 10, 10, 10; - --danger-color: rgb(255, 106, 106); - } -} -p { - font-size: 0.8; - max-width: 65ch; - line-height: 1.7; - margin-bottom: 1.5rem; - color: rgba(var(--text-color), 0.8); - &:not(:last-of-type){ - margin-bottom: 1rem; - } -} -img{ - object-fit: cover; + height: 100%; } -a{ - color: inherit; - text-decoration: none; - &:focus-visible{ - box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; - } +body { + --accent-color: #0d7377; + --secondary-color: #ffac2e; + --text-color: 20, 20, 20; + --foreground-color: 252, 253, 255; + --background-color: 241, 243, 248; + --danger-color: rgb(255, 75, 75); + --green: #1cad59; + --yellow: rgb(220, 165, 0); + color: rgba(var(--text-color), 1); + background-color: rgba(var(--background-color), 1); + overflow-y: hidden; } -button{ - display: inline-flex; - border: none; - background-color: inherit; +body[data-theme="dark"] { + --accent-color: #32e0c4; + --secondary-color: #d60739; + --text-color: 220, 220, 220; + --foreground-color: 27, 28, 29; + --background-color: 21, 22, 22; + --danger-color: rgb(255, 106, 106); + --green: #00e676; + --yellow: rgb(255, 213, 5); } -a:any-link:focus-visible{ - outline: rgba(var(--text-color), 1) 0.1rem solid; +p, +strong { + font-size: 0.9rem; + max-width: 65ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.9); } -sm-button{ - --border-radius: 0.3rem; -} -ul{ - list-style: none; -} -.table{ - display: grid; - gap: 0.5rem; - margin: 1rem 0; - position: relative; - text-align: left; - overflow-x: auto; - border-radius: 0.3rem; - border-collapse: separate; - border-spacing: 1rem 1.5rem; - background-color: rgba(var(--text-color), .04); - p:only-of-type{ - margin-bottom: 0; - } -} -.tr{ - display: grid; - gap: 1rem; - padding: 1rem; - grid-template-columns: 11rem 1fr; - width: 100%; - &:nth-of-type(odd){ - background-color: rgba(var(--text-color), .04); - } - p{ - min-width: 30ch; - } -} -.flex{ - display: flex; -} -.grid{ - display: grid; -} -.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: 0.8rem; +img { + object-fit: cover; } -.uppercase{ - text-transform: uppercase; +a { + color: inherit; + text-decoration: none; + &:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } } -.capitalize{ - text-transform: capitalize; + +button { + display: inline-flex; + border: none; + background-color: inherit; } -.flex{ - display: flex; + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; } -.grid{ - display: grid; +sm-button { + --border-radius: 0.3rem; } -.grid-3{ - grid-template-columns: 1fr auto auto; +ul { + list-style: none; } -.flow-column{ - grid-auto-flow: column; +.table { + display: grid; + gap: 0.5rem; + margin: 1rem 0; + position: relative; + text-align: left; + overflow-x: auto; + border-radius: 0.3rem; + border-collapse: separate; + border-spacing: 1rem 1.5rem; + background-color: rgba(var(--text-color), 0.04); + p:only-of-type { + margin-bottom: 0; + } } -.gap-0-5{ - gap: 0.5rem; +.tr { + display: grid; + gap: 1rem; + padding: 1rem; + grid-template-columns: 11rem 1fr; + width: 100%; + &:nth-of-type(odd) { + background-color: rgba(var(--text-color), 0.04); + } + p { + min-width: 30ch; + } } -.gap-1{ - gap: 1rem; +.flex { + display: flex; } -.gap-1-5{ - gap: 1.5rem; +.grid { + display: grid; } -.gap-2{ - gap: 2rem; +.hide { + opacity: 0; + pointer-events: none; } -.gap-3{ - gap: 3rem; +.hide-completely { + display: none !important; } -.text-align-right{ - text-align: right; +.no-transformations { + transform: none !important; } -.align-start{ - align-items: flex-start; +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.align-center{ - align-items: center; +.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; } -.text-center{ - text-align: center; +.full-bleed { + grid-column: 1/4; } -.justify-start{ - justify-content: start; +.h1 { + font-size: 2.5rem; } -.justify-center{ - justify-content: center; +.h2 { + font-size: 2rem; } -.justify-right{ - margin-left: auto; +.h3 { + font-size: 1.4rem; } -.align-self-center{ - align-self: center; +.h4 { + font-size: 1rem; } -.justify-self-center{ - justify-self: center; +.h5 { + font-size: 0.8rem; } -.justify-self-start{ - justify-self: start; + +.uppercase { + text-transform: uppercase; } -.justify-self-end{ - justify-self: end; +.capitalize { + text-transform: capitalize; } -.direction-column{ - flex-direction: column; +.flex { + display: flex; } -.space-between{ - justify-content: space-between; +.grid { + display: grid; } -.w-100{ - width: 100%; +.grid-3 { + grid-template-columns: 1fr auto auto; } -.color-0-8{ - color: rgba(var(--text-color), 0.8); +.flow-column { + grid-auto-flow: column; } -.weight-400{ - font-weight: 400; +.gap-0-5 { + gap: 0.5rem; } -.weight-500{ - font-weight: 500; +.gap-1 { + gap: 1rem; } -.ripple{ - position: absolute; - border-radius: 50%; - transform: scale(0); - background: rgba(var(--text-color), 0.16); - pointer-events: none; +.gap-1-5 { + gap: 1.5rem; } -.interact{ - position: relative; - overflow: hidden; - cursor: pointer; - -webkit-tap-highlight-color: transparent; +.gap-2 { + gap: 2rem; } -.observe-empty-state:empty{ - display: none; +.gap-3 { + gap: 3rem; } -.observe-empty-state:not(:empty) ~ .empty-state{ - display: none; +.text-align-right { + text-align: right; } -.icon{ - width: 1.5rem; - height: 1.5rem; - fill: rgba(var(--text-color), 0.9); +.align-start { + align-items: flex-start; } -.button__icon{ - height: 1.2rem; - width: 1.2rem; - &--left{ - margin-right: 0.5rem; - } - &--right{ - margin-left: 0.5rem; - } +.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), 0.8); +} +.weight-400 { + font-weight: 400; +} +.weight-500 { + font-weight: 500; +} +.ripple { + height: 8rem; + width: 8rem; + position: absolute; + border-radius: 50%; + transform: scale(0); + background: radial-gradient( + circle, + rgba(var(--text-color), 0.3) 0%, + rgba(0, 0, 0, 0) 50% + ); + pointer-events: none; +} +.interact { + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} +.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), 0.9); +} +.button__icon { + height: 1.2rem; + width: 1.2rem; + &--left { + margin-right: 0.5rem; + } + &--right { + margin-left: 0.5rem; + } } //Syntax highlighting @@ -274,34 +283,34 @@ ul{ .token.prolog, .token.doctype, .token.cdata { - color: #50CB93; + color: #50cb93; } .token.punctuation, -.token.tag{ - color: #29B6F6; +.token.tag { + color: #29b6f6; } .token.attr-name, .token.namespace, .token.deleted { - color: #1DE9B6; + color: #1de9b6; } .token.function-name { - color: #6196cc; + color: #6196cc; } .token.boolean, .token.number, .token.function { - color: #f08d49; + color: #f08d49; } .token.property, .token.class-name, .token.constant, .token.symbol { - color: #f8c555; + color: #f8c555; } .token.selector, @@ -309,7 +318,7 @@ ul{ .token.atrule, .token.keyword, .token.builtin { - color: #FF6767; + color: #ff6767; } .token.string, @@ -317,254 +326,256 @@ ul{ .token.attr-value, .token.regex, .token.variable { - color: #84FFFF; + color: #84ffff; } .token.operator, .token.entity, .token.url { - color: #67cdcc; + color: #67cdcc; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } .token.inserted { - color: green; + color: green; } -pre{ - max-width: 100%; - margin: 1rem 0; - padding: 0 1.5rem; - overflow-x: auto; - font-size: 0.9rem; - font-weight: 500; - white-space: pre; - border-radius: 0.5rem; - background: rgba(0,0,0, 0.9); - line-height: 1.7; +pre { + max-width: 100%; + margin: 1rem 0; + padding: 0 1.5rem; + overflow-x: auto; + font-size: 0.9rem; + font-weight: 500; + white-space: pre; + border-radius: 0.5rem; + background: rgba(0, 0, 0, 0.9); + line-height: 1.7; } -code{ - border-radius: 0.3rem; - font-weight: 400; - padding: 0.2rem 0.4rem; - background: rgba(var(--text-color), .1); - color: rgba(255, 255, 255, 0.9); +code { + border-radius: 0.3rem; + font-weight: 400; + padding: 0.2rem 0.4rem; + background: rgba(var(--text-color), 0.1); + color: rgba(255, 255, 255, 0.9); } -code *{ - color: rgba(255, 255, 255, 0.9); - font-family: 'Roboto Mono', monospace; +code * { + color: rgba(255, 255, 255, 0.9); + font-family: "Roboto Mono", monospace; } -pre code{ - line-height: 1.4; - border-radius: none; - background: none; - width: 100%; +pre code { + line-height: 1.4; + border-radius: none; + background: none; + width: 100%; } // -h1,h2,h3,h4.h5{ - font-family: 'Poppins', sans-serif; +h1, +h2, +h3, +h4.h5 { + font-family: "Poppins", sans-serif; } -h2{ +h2 { margin: 3rem 0 1rem 0; text-transform: capitalize; } -main{ - display: grid; - height: 100%; +main { + display: grid; + height: 100%; } -#main_header{ - padding: 0.5rem 1.5rem; - border-bottom: 1px solid rgba(var(--text-color), .1); +#main_header { + padding: 0.5rem 1.5rem; + border-bottom: 1px solid rgba(var(--text-color), 0.1); } -#side_nav_button{ - padding: 0.5rem; - margin-left: -0.5rem; +#side_nav_button { + padding: 0.5rem; + margin-left: -0.5rem; } -.right{ - max-height: 100%; - overflow-y: auto; +.right { + max-height: 100%; + overflow-y: auto; } -#side_nav{ - & > :last-child{ - padding-bottom: 3rem; - } - h4{ - font-size: 0.9rem; - letter-spacing: 0.08em; - text-transform: uppercase; - padding: 1.5rem; - } -} -.right{ - padding: 1.5rem; - h1{ - margin-bottom: 1.5rem; - } -} -.list{ - list-style: none; - display: flex; - flex-direction: column; - margin-bottom: 0.8rem; -} -.list__item{ - display: flex; - padding: 0.8rem 1.5rem; - text-transform: capitalize; - &--active{ - color: var(--accent-color); - background: rgba(var(--text-color), .06); - } -} -.card{ - display: flex; - flex-direction: column; - margin-right: 1rem; - border-radius: 0.4rem; - padding: 1.5rem; - min-width: min(24rem, 80%); - background-color: rgba(var(--text-color), .06); -} -sm-carousel{ - margin-bottom: 1rem; -} -sm-tab-header{ - margin-bottom: 1.5rem; -} -.page{ - display: flex; - flex-direction: column; +#side_nav { + & > :last-child { padding-bottom: 3rem; -} -ol{ - padding: 0.6rem 1rem; - max-width: 75ch; - margin-bottom: 1.5rem; - li{ - margin-bottom: 1rem; - &:last-of-type{ - margin-bottom: 0; - } - } -} -strong{ - max-width: 65ch; -} -strong.important{ - display: flex; - padding: 0.5rem; - margin: 0.5rem 0; - border-radius: 0.3rem; - 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.2rem; - padding: 0.1rem 0.5rem; + } + h4 { font-size: 0.9rem; - line-height: 1.6; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 1.5rem; + } } -#total_components_count{ - font-size: 4rem; +.right { + padding: 1.5rem; + h1 { + margin-bottom: 1.5rem; + } } -#components_selection_list{ +.list { + list-style: none; + display: flex; + flex-direction: column; + margin-bottom: 0.8rem; +} +.list__item { + display: flex; + padding: 0.8rem 1.5rem; + text-transform: capitalize; + &--active { + color: var(--accent-color); + background: rgba(var(--text-color), 0.06); + } +} +.card { + display: flex; + flex-direction: column; + margin-right: 1rem; + border-radius: 0.4rem; + padding: 1.5rem; + min-width: min(24rem, 80%); + background-color: rgba(var(--text-color), 0.06); +} +sm-carousel { + margin-bottom: 1rem; +} +sm-tab-header { + margin-bottom: 1.5rem; +} +.page { + display: flex; + flex-direction: column; + padding-bottom: 3rem; +} +ol { + padding: 0.6rem 1rem; + max-width: 75ch; + margin-bottom: 1.5rem; + li { + margin-bottom: 1rem; + &:last-of-type { + margin-bottom: 0; + } + } +} +strong { + max-width: 65ch; +} +strong.important { + display: flex; + padding: 0.5rem; + margin: 0.5rem 0; + border-radius: 0.3rem; + 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), 0.1); + border-radius: 0.2rem; + padding: 0.1rem 0.5rem; + font-size: 0.9rem; + line-height: 1.6; +} +#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 0; +} +.comp-checkbox__title { + margin-left: 0.5rem; +} +.auto-grid-2 { + justify-content: center; + justify-items: center; + text-align: center; + grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); +} +.screenshot { + object-fit: cover; + object-position: top; + height: 30rem; + width: 16rem; + border-radius: 1rem; + justify-self: center; + box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), 0 0 0 0.3rem black; +} +@media screen and (max-width: 640px) { + main { + grid-template-rows: auto 1fr; + grid-template-columns: 1fr; + } +} +@media screen and (min-width: 640px) { + sm-popup { + --width: 32rem; + } + #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; + & > * { + grid-column: 2/3; + } + } + .page__title { + font-size: 2.5rem; + } + #overview_page { display: grid; gap: 1.5rem; - grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); - padding: 1.5rem 0 3rem 0; + grid-template-columns: 1fr auto; + & > div:first-of-type { + grid-column: 2/3; + text-align: right; + } + & > div:nth-of-type(2) { + grid-row: 1/2; + } + } } -.comp-checkbox__title{ - margin-left: 0.5rem; -} -.auto-grid-2{ - justify-content: center; - justify-items: center; - text-align: center; - grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); -} -.screenshot{ - object-fit: cover; - object-position: top; - height: 30rem; - width: 16rem; +@media (any-hover: hover) { + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb { + background: rgba(var(--text-color), 0.3); border-radius: 1rem; - justify-self: center; - box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0, 0.3), - 0 0 0 0.3rem black; + &:hover { + background: rgba(var(--text-color), 0.5); + } + } + .list__item:hover { + background: rgba(var(--text-color), 0.1); + cursor: pointer; + } } -@media screen and (max-width: 640px){ - main{ - grid-template-rows: auto 1fr; - grid-template-columns: 1fr; - } -} -@media screen and (min-width: 640px){ - sm-popup{ - --width: 32rem; - } - #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; - & > * { - grid-column: 2/3; - } - } - .page__title{ - font-size: 2.5rem; - } - #overview_page{ - display: grid; - gap: 1.5rem; - grid-template-columns: 1fr auto; - & > div:first-of-type{ - grid-column: 2/3; - text-align: right; - } - & > div:nth-of-type(2){ - grid-row: 1/2; - } - } -} -@media (any-hover: hover){ - ::-webkit-scrollbar{ - width: 0.5rem; - height: 0.5rem; - } - - ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); - border-radius: 1rem; - &:hover{ - background: rgba(var(--text-color), 0.5); - } - } - .list__item:hover{ - background: rgba(var(--text-color), .1); - cursor: pointer; - } -} \ No newline at end of file diff --git a/components/dist/button.js b/components/dist/button.js index 5f87683..f5f9ed1 100644 --- a/components/dist/button.js +++ b/components/dist/button.js @@ -1,3 +1,4 @@ +//Button const smButton = document.createElement('template') smButton.innerHTML = ` \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")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}}); \ 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")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}}); \ No newline at end of file diff --git a/components/dist/carousel.js b/components/dist/carousel.js index a2f6196..c105dd3 100644 --- a/components/dist/carousel.js +++ b/components/dist/carousel.js @@ -11,15 +11,12 @@ smCarousel.innerHTML = ` display: -webkit-box; display: -ms-flexbox; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --arrow-left: 1rem; --arrow-right: 1rem; --arrow-top: auto; --arrow-bottom: auto; - --nav-icon-fill: rgba(var(--background-color), 1); - --nav-background-color: rgba(var(--text-color), 1); + --nav-icon-fill: rgba(var(--background-color, (255, 255, 255)), 1); + --nav-background-color: rgba(var(--text-color, (17,17,17)), 1); --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; --indicator-top: auto; --indicator-bottom: -1.5rem; @@ -27,7 +24,7 @@ smCarousel.innerHTML = ` --indicator-width: 0.4rem; --indicator-border-radius: 0.4rem; --indicators-gap: 0.5rem; - --active-indicator-color: var(--accent-color); + --active-indicator-color: var(--accent-color, teal); } .carousel__button{ position: absolute; @@ -52,7 +49,7 @@ button:focus{ outline: none; } button:focus-visible{ - outline: rgba(var(--text-color), 1) 0.1rem solid; + outline: rgba(var(--text-color, (17,17,17)), 1) 0.1rem solid; } .carousel__button:active{ transform: scale(0.9); @@ -110,7 +107,7 @@ button:focus-visible{ position: relative; height: var(--indicator-height); width: var(--indicator-width); - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: var(--indicator-border-radius); -webkit-transition: 0.2s; -o-transition: 0.2s; @@ -370,14 +367,14 @@ customElements.define('sm-carousel', class extends HTMLElement { const resObs = new ResizeObserver(entries => { entries.forEach(entry => { - if(entry.contentBoxSize) { + if (entry.contentBoxSize) { // Firefox implements `contentBoxSize` as a single content rect, rather than an array const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; - + this.scrollDistance = contentBoxSize.inlineSize * 0.6 } else { this.scrollDistance = entry.contentRect.width * 0.6 - } + } }) }) resObs.observe(this) diff --git a/components/dist/carousel.min.js b/components/dist/carousel.min.js index fff5728..0cf4ba1 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("indicator"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".indicator")){const n=parseInt(t.target.closest(".indicator").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=>i.observe(t)),this.carouselItems.length>0?(o.observe(this.carouselItems[0]),e.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),o.disconnect(),e.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,i)=>{t.append(this.createIndicator(i)),n.dataset.rank=i}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},i=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),e=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,i){n!==i&&("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("indicator"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".indicator")){const n=parseInt(t.target.closest(".indicator").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=>i.observe(t)),this.carouselItems.length>0?(e.observe(this.carouselItems[0]),o.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),e.disconnect(),o.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,i)=>{t.append(this.createIndicator(i)),n.dataset.rank=i}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},i=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),e=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,i){n!==i&&("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 a7f8e18..19f3989 100644 --- a/components/dist/checkbox.js +++ b/components/dist/checkbox.js @@ -11,13 +11,10 @@ smCheckbox.innerHTML = ` display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --height: 1.2rem; --width: 1.2rem; --border-radius: 0.2rem; - --border-color: rgba(var(--text-color), 0.7); + --border-color: rgba(var(--text-color, (17,17,17)), 0.7); } :host([disabled]) { opacity: 0.6; @@ -42,7 +39,7 @@ smCheckbox.innerHTML = ` } .checkbox:active .icon, .checkbox:focus-within .icon{ - box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; } input { @@ -59,11 +56,11 @@ smCheckbox.innerHTML = ` :host([checked]) .checkmark { stroke-dashoffset: 0; - stroke: rgba(var(--background-color), 1); + stroke: rgba(var(--background-color, (255,255,255)), 1); } :host([checked]) .icon { - background: var(--accent-color); - box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + background: var(--accent-color, teal); + box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset; } .icon { fill: none; diff --git a/components/dist/checkbox.min.js b/components/dist/checkbox.min.js index 156a345..6b22873 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.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.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")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),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("keydown",this.handleKeyDown),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.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.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")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),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("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}}); \ No newline at end of file diff --git a/components/dist/color-grid.js b/components/dist/color-grid.js new file mode 100644 index 0000000..1e8a7c1 --- /dev/null +++ b/components/dist/color-grid.js @@ -0,0 +1,150 @@ +//Color Grid +const colorGrid = document.createElement('template'); +colorGrid.innerHTML = ` + +
+
`; + +customElements.define('color-grid', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(colorGrid.content.cloneNode(true)) + + this.colorArray = [] + this.container = this.shadowRoot.querySelector('.color-tile-container') + this.handleChange = this.handleChange.bind(this) + this.setCheckMark = this.setCheckMark.bind(this) + } + + set colors(arr) { + this.colorArray = arr + this.renderTiles() + } + + set selectedColor(color) { + if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) { + const selectedTile = this.container.querySelector(`[data-color="${color}"]`) + if (selectedTile) { + selectedTile.querySelector('input').checked = true + this.setCheckMark(selectedTile) + } + } + } + + randString(length) { + let result = ''; + let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + + for (let i = 0; i < length; i++) + result += characters.charAt(Math.floor(Math.random() * characters.length)); + return result; + } + + renderTiles() { + this.container.innerHTML = '' + const frag = document.createDocumentFragment() + const groupName = this.randString(6) + this.colorArray.forEach(color => { + const label = document.createElement('label') + label.classList.add('color-tile') + label.setAttribute('data-color', color) + if (color.includes('--')) + label.setAttribute('style', `background-color: var(${color})`) + else + label.setAttribute('style', `background-color: ${color}`) + label.innerHTML = ` + + ` + frag.append(label) + }) + this.container.append(frag) + } + setCheckMark(target) { + target.parentNode.querySelectorAll('.checkmark').forEach(checkmark => checkmark.remove()) + const checkMark = document.createElement('div') + checkMark.classList.add('checkmark') + checkMark.innerHTML = ` + + ` + target.append(checkMark) + } + + handleChange(e) { + const clickedTile = e.target.closest('.color-tile') + this.setCheckMark(clickedTile) + const clickedTileColor = clickedTile.dataset.color + const tileSelected = new CustomEvent('colorselected', { + bubbles: true, + composed: true, + detail: { + value: clickedTileColor, + } + }) + this.dispatchEvent(tileSelected) + } + + connectedCallback() { + this.container.addEventListener('change', this.handleChange) + } + + disconnectedCallback() { + this.container.removeEventListener('change', this.handleChange) + } + }) \ No newline at end of file diff --git a/components/dist/color-grid.min.js b/components/dist/color-grid.min.js new file mode 100644 index 0000000..d69922f --- /dev/null +++ b/components/dist/color-grid.min.js @@ -0,0 +1 @@ +const colorGrid=document.createElement("template");colorGrid.innerHTML='\n\n
\n
',customElements.define("color-grid",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(colorGrid.content.cloneNode(!0)),this.colorArray=[],this.container=this.shadowRoot.querySelector(".color-tile-container"),this.handleChange=this.handleChange.bind(this),this.setCheckMark=this.setCheckMark.bind(this)}set colors(e){this.colorArray=e,this.renderTiles()}set selectedColor(e){if(this.colorArray.includes(e)&&this.container.querySelector(`[data-color="${e}"]`)){const n=this.container.querySelector(`[data-color="${e}"]`);n&&(n.querySelector("input").checked=!0,this.setCheckMark(n))}}randString(e){let n="",t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let r=0;r{const r=document.createElement("label");r.classList.add("color-tile"),r.setAttribute("data-color",t),t.includes("--")?r.setAttribute("style",`background-color: var(${t})`):r.setAttribute("style",`background-color: ${t}`),r.innerHTML=`\n \n `,e.append(r)}),this.container.append(e)}setCheckMark(e){e.parentNode.querySelectorAll(".checkmark").forEach(e=>e.remove());const n=document.createElement("div");n.classList.add("checkmark"),n.innerHTML='\n \n ',e.append(n)}handleChange(e){const n=e.target.closest(".color-tile");this.setCheckMark(n);const t=n.dataset.color,r=new CustomEvent("colorselected",{bubbles:!0,composed:!0,detail:{value:t}});this.dispatchEvent(r)}connectedCallback(){this.container.addEventListener("change",this.handleChange)}disconnectedCallback(){this.container.removeEventListener("change",this.handleChange)}}); \ No newline at end of file diff --git a/components/dist/copy.js b/components/dist/copy.js index 5d2be55..31b82ec 100644 --- a/components/dist/copy.js +++ b/components/dist/copy.js @@ -10,16 +10,11 @@ smCopy.innerHTML = ` :host{ display: -webkit-box; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --padding: 0; - --background-color: inherit; - --button-background-color: rgba(var(--text-color), 0.2); + --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2); } .copy{ display: grid; - width: 100%; gap: 0.5rem; padding: var(--padding); align-items: center; @@ -40,8 +35,15 @@ smCopy.innerHTML = ` cursor: pointer; border: none; padding: 0.4rem; - background-color: inherit; + background-color: rgba(var(--text-color, (17,17,17)), 0.06); border-radius: var(--button-border-radius, 0.3rem); + transition: background-color 0.2s; + font-family: inherit; + color: inherit; + font-size: 0.7rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05rem; } .copy-button:active{ background-color: var(--button-background-color); @@ -49,15 +51,12 @@ smCopy.innerHTML = ` .icon{ height: 1.2rem; width: 1.2rem; - fill: rgba(var(--text-color), 0.8); + fill: rgba(var(--text-color, (17,17,17)), 0.8); } @media (any-hover: hover){ .copy:hover .copy-button{ opacity: 1; } - .copy-button{ - opacity: 0.6; - } .copy-button:hover{ background-color: var(--button-background-color); } @@ -67,7 +66,7 @@ smCopy.innerHTML = `

diff --git a/components/dist/copy.min.js b/components/dist/copy.min.js index d0a41fa..0949787 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',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',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 dce4414..7b7c1ae 100644 --- a/components/dist/file-input.js +++ b/components/dist/file-input.js @@ -7,13 +7,10 @@ fileInput.innerHTML = ` box-sizing: border-box; } :host{ - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --border-radius: 0.3rem; - --button-color: rgba(var(--background-color), 1); + --button-color: rgba(var(--background-color, (255, 255, 255)), 1); --button-font-weight: 500; - --button-background-color: var(--accent-color); + --button-background-color: var(--accent-color, teal); } .file-input { display: flex; @@ -44,14 +41,14 @@ fileInput.innerHTML = ` align-items: center; padding: 0.5rem 0.8rem; border-radius: var(--border-radius); - background-color: rgba(var(--text-color), 0.06) + background-color: rgba(var(--text-color, (17,17,17)), 0.06) } .file-name{ } .file-size{ font-size: 0.8rem; font-weight: 400; - color: rgba(var(--text-color), 0.8); + color: rgba(var(--text-color, (17,17,17)), 0.8); } input[type=file] { display: none; diff --git a/components/dist/file-input.min.js b/components/dist/file-input.min.js index 9b5cb61..033e4de 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.filesPreviewWrapper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture","type"],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","type"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}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.filesPreviewWrapper.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.filesPreviewWrapper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWrapper.append(e)}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(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.filesPreviewWrapper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture","type"],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","type"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}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.filesPreviewWrapper.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.filesPreviewWrapper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWrapper.append(e)}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(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/form.js b/components/dist/form.js index f762fa4..8c59563 100644 --- a/components/dist/form.js +++ b/components/dist/form.js @@ -1,25 +1,25 @@ const smForm = document.createElement('template'); smForm.innerHTML = ` - -
      - -
      -`; + +
      + +
      + `; customElements.define('sm-form', class extends HTMLElement { constructor() { @@ -33,7 +33,7 @@ customElements.define('sm-form', class extends HTMLElement { this.requiredElements this.submitButton this.resetButton - this.allRequiredValid = false; + this.invalidFields = false; this.debounce = this.debounce.bind(this) this._checkValidity = this._checkValidity.bind(this) @@ -51,18 +51,13 @@ customElements.define('sm-form', class extends HTMLElement { }; } _checkValidity() { - this.allRequiredValid = this.requiredElements.every(elem => elem.isValid) if (!this.submitButton) return; - if (this.allRequiredValid) { - this.submitButton.disabled = false; - } - else { - this.submitButton.disabled = true; - } + this.invalidFields = this.requiredElements.filter(elem => !elem.isValid) + this.submitButton.disabled = this.invalidFields.length; } handleKeydown(e) { - if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) { - if (this.allRequiredValid) { + if (e.key === 'Enter' && e.target.tagName.includes('SM-INPUT')) { + if (!this.invalidFields.length) { if (this.submitButton) { this.submitButton.click() } @@ -70,9 +65,8 @@ customElements.define('sm-form', class extends HTMLElement { bubbles: true, composed: true, })) - } - else { - this.requiredElements.find(elem => !elem.isValid).vibrate() + } else { + this.requiredElements.forEach(elem => { if (!elem.isValid) elem.vibrate() }) } } } @@ -90,13 +84,21 @@ customElements.define('sm-form', class extends HTMLElement { this._checkValidity() } connectedCallback() { - const slot = this.shadowRoot.querySelector('slot') - slot.addEventListener('slotchange', this.elementsChanged) + this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged) this.addEventListener('input', this.debounce(this._checkValidity, 100)); this.addEventListener('keydown', this.debounce(this.handleKeydown, 100)); + const mutationObserver = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.type === 'childList') { + this.elementsChanged() + } + }) + }) + mutationObserver.observe(this, { childList: true, subtree: true }) } disconnectedCallback() { this.removeEventListener('input', this.debounce(this._checkValidity, 100)); this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100)); + mutationObserver.disconnect() } }) \ No newline at end of file diff --git a/components/dist/form.min.js b/components/dist/form.min.js index 2ff3be5..a91384b 100644 --- a/components/dist/form.min.js +++ b/components/dist/form.min.js @@ -1 +1 @@ -const smForm=document.createElement("template");smForm.innerHTML='\n \n\t
      \n\t\t\n\t
      \n',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this._checkValidity=this._checkValidity.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this),this.elementsChanged=this.elementsChanged.bind(this)}debounce(t,e){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout(()=>{t.apply(null,s)},e)}}_checkValidity(){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"!==t.key||t.target.tagName.includes("TEXTAREA")||(this.allRequiredValid?(this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))):this.requiredElements.find(t=>!t.isValid).vibrate())}reset(){this.formElements.forEach(t=>t.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.hasAttribute("required")),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",this.elementsChanged),this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}}); \ No newline at end of file +const smForm=document.createElement("template");smForm.innerHTML='\n \n
      \n \n
      \n ',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.formElements,this.requiredElements,this.submitButton,this.resetButton,this.invalidFields=!1,this.debounce=this.debounce.bind(this),this._checkValidity=this._checkValidity.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this),this.elementsChanged=this.elementsChanged.bind(this)}debounce(e,t){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout(()=>{e.apply(null,s)},t)}}_checkValidity(){this.submitButton&&(this.invalidFields=this.requiredElements.filter(e=>!e.isValid),this.submitButton.disabled=this.invalidFields.length)}handleKeydown(e){"Enter"===e.key&&e.target.tagName.includes("SM-INPUT")&&(this.invalidFields.length?this.requiredElements.forEach(e=>{e.isValid||e.vibrate()}):(this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))))}reset(){this.formElements.forEach(e=>e.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(e=>e.hasAttribute("required")),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()}connectedCallback(){this.shadowRoot.querySelector("slot").addEventListener("slotchange",this.elementsChanged),this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100));const e=new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&this.elementsChanged()})});e.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),mutationObserver.disconnect()}}); \ No newline at end of file diff --git a/components/dist/hamburger-menu.js b/components/dist/hamburger-menu.js index 97ae949..696c17a 100644 --- a/components/dist/hamburger-menu.js +++ b/components/dist/hamburger-menu.js @@ -14,9 +14,6 @@ hamburgerMenu.innerHTML = ` height: 100%; overflow-y: auto; scrollbar-width: thin; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --padding: 0 0 3rem 0; --backdrop-color: rgba(0,0,0,0.5); } @@ -41,7 +38,7 @@ hamburgerMenu.innerHTML = ` overflow-y: auto; width: calc(100% - 4rem); transition: transform 0.3s; - background-color: rgba(var(--background-color), 1); + background-color: rgba(var(--background-color, (255, 255, 255)), 1); box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1); z-index: 1; } @@ -73,9 +70,9 @@ hamburgerMenu.innerHTML = ` } ::-webkit-scrollbar-thumb{ border-radius: 1rem; - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color, (17,17,17)), 0.3); &:hover{ - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color, (17,17,17)), 0.5); } } } diff --git a/components/dist/hamburger-menu.min.js b/components/dist/hamburger-menu.min.js index 6ab8766..c6acb70 100644 --- a/components/dist/hamburger-menu.min.js +++ b/components/dist/hamburger-menu.min.js @@ -1 +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 +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 eaa8583..26296bb 100644 --- a/components/dist/input.js +++ b/components/dist/input.js @@ -1,202 +1,208 @@ +//Input const smInput = document.createElement('template') smInput.innerHTML = ` - -
      - - -
      -`; + .hide{ + display: none !important; + } + button{ + display: flex; + border: none; + background: none; + padding: 0; + border-radius: 1rem; + min-width: 0; + cursor: pointer; + } + button:focus{ + outline: var(--accent-color, teal) solid medium; + } + .icon { + height: 1.2rem; + width: 1.2rem; + fill: rgba(var(--text-color, (17,17,17)), 0.6); + } + + :host(.round) .input{ + border-radius: 10rem; + } + .input { + display: flex; + cursor: text; + min-width: 0; + text-align: left; + align-items: center; + position: relative; + gap: var(--icon-gap); + padding: var(--padding, 0.6rem 0.8rem); + border-radius: var(--border-radius,0.3rem); + transition: opacity 0.3s, box-shadow 0.2s; + background: var(--background); + width: 100%; + outline: none; + min-height: var(--min-height); + } + .input.readonly .clear{ + opacity: 0 !important; + margin-right: -2rem; + pointer-events: none !important; + } + .readonly{ + pointer-events: none; + } + .input:focus-within:not(.readonly){ + box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important; + } + .disabled{ + pointer-events: none; + opacity: 0.6; + } + .label { + grid-area: 1/1/2/2; + font-size: inherit; + opacity: .7; + font-weight: 400; + transition: -webkit-transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s, color .03; + transform-origin: left; + pointer-events: none; + white-space: nowrap; + overflow: hidden; + width: 100%; + user-select: none; + will-change: transform; + } + .outer-container{ + position: relative; + width: var(--width); + } + .container{ + width: 100%; + display: grid; + grid-template-columns: 1fr auto; + position: relative; + align-items: center; + } + input{ + grid-area: 1/1/2/2; + font-size: inherit; + border: none; + background: transparent; + outline: none; + color: inherit; + font-family: inherit; + width: 100%; + caret-color: var(--accent-color, teal); + } + :host([animate]) .input:focus-within .container input, + .animate-placeholder .container input { + -webkit-transform: translateY(0.6rem); + -ms-transform: translateY(0.6rem); + transform: translateY(0.6rem); + } + + :host([animate]) .input:focus-within .label, + .animate-placeholder .label { + -webkit-transform: translateY(-0.7em) scale(0.8); + -ms-transform: translateY(-0.7em) scale(0.8); + transform: translateY(-0.7em) scale(0.8); + opacity: 1; + color: var(--accent-color,teal) + } + :host([variant="outlined"]) .input { + box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; + background: rgba(var(--background-color, (255,255,255)), 1); + } + .animate-placeholder:focus-within:not(.readonly) .label{ + color: var(--accent-color,teal) + } + .feedback-text:not(:empty){ + display: flex; + width: 100%; + text-align: left; + font-size: 0.9rem; + align-items: center; + padding: 0.8rem 0; + color: rgba(var(--text-color, (17,17,17)), 0.8); + } + .success{ + color: var(--success-color); + } + .error{ + color: var(--danger-color); + } + .status-icon{ + margin-right: 0.2rem; + } + .status-icon--error{ + fill: var(--danger-color); + } + .status-icon--success{ + fill: var(--success-color); + } + @media (any-hover: hover){ + .icon:hover{ + background: rgba(var(--text-color, (17,17,17)), 0.1); + } + } + +
      + + +
      + `; customElements.define('sm-input', class extends HTMLElement { @@ -219,10 +225,12 @@ customElements.define('sm-input', this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']; this.reset = this.reset.bind(this); + this.clear = this.clear.bind(this); this.focusIn = this.focusIn.bind(this); this.focusOut = this.focusOut.bind(this); this.fireEvent = this.fireEvent.bind(this); this.checkInput = this.checkInput.bind(this); + this.handleKeydown = this.handleKeydown.bind(this); this.vibrate = this.vibrate.bind(this); } @@ -235,9 +243,9 @@ customElements.define('sm-input', } set value(val) { + if (val === this.input.value) return; this.input.value = val; this.checkInput(); - this.fireEvent(); } get placeholder() { @@ -304,9 +312,9 @@ customElements.define('sm-input', this.feedbackText.classList.add('error'); this.feedbackText.classList.remove('success'); this.feedbackText.innerHTML = ` - - ${this._errorText} - `; + + ${this._errorText} + `; } } return (_isValid && _customValid); @@ -315,6 +323,10 @@ customElements.define('sm-input', reset() { this.value = ''; } + clear() { + this.value = ''; + this.input.focus(); + } focusIn() { this.input.focus(); @@ -344,14 +356,24 @@ customElements.define('sm-input', if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return; if (this.input.value !== '') { if (this.animate) - this.inputParent.classList.add('animate-label'); + this.inputParent.classList.add('animate-placeholder'); else this.label.classList.add('hide'); } else { if (this.animate) - this.inputParent.classList.remove('animate-label'); + this.inputParent.classList.remove('animate-placeholder'); else this.label.classList.remove('hide'); + this.feedbackText.textContent = ''; + } + } + handleKeydown(e) { + if (e.key.length === 1) { + if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'].includes(e.key)) { + e.preventDefault(); + } else if (e.key === '.' && e.target.value.includes('.')) { + e.preventDefault(); + } } } vibrate() { @@ -372,7 +394,7 @@ customElements.define('sm-input', this.animate = this.hasAttribute('animate'); this.setAttribute('role', 'textbox'); this.input.addEventListener('input', this.checkInput); - this.clearBtn.addEventListener('click', this.reset); + this.clearBtn.addEventListener('click', this.clear); } attributeChangedCallback(name, oldValue, newValue) { @@ -394,7 +416,11 @@ customElements.define('sm-input', } else if (name === 'type') { if (this.hasAttribute('type') && this.getAttribute('type') === 'number') { - this.input.setAttribute('inputmode', 'numeric'); + this.input.setAttribute('inputmode', 'decimal'); + this.input.addEventListener('keydown', this.handleKeydown); + } else { + this.input.removeEventListener('keydown', this.handleKeydown); + } } else if (name === 'helper-text') { @@ -431,6 +457,7 @@ customElements.define('sm-input', } disconnectedCallback() { this.input.removeEventListener('input', this.checkInput); - this.clearBtn.removeEventListener('click', this.reset); + this.clearBtn.removeEventListener('click', this.clear); + this.input.removeEventListener('keydown', this.handleKeydown); } }) \ No newline at end of file diff --git a/components/dist/input.min.js b/components/dist/input.min.js index b24a2ff..5da5b32 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.outerContainer=this.shadowRoot.querySelector(".outer-container"),this._helperText="",this._errorText="",this.isRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","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.checkInput=this.checkInput.bind(this),this.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}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 validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}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}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(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 `),t&&e}}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)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),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"))}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),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.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"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.outerContainer=this.shadowRoot.querySelector(".outer-container"),this._helperText="",this._errorText="",this.isRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.clear=this.clear.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}get value(){return this.input.value}set value(t){t!==this.input.value&&(this.input.value=t,this.checkInput())}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 validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}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}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(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 `),t&&e}}reset(){this.value=""}clear(){this.value="",this.input.focus()}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-placeholder"):this.label.classList.add("hide"):(this.animate?this.inputParent.classList.remove("animate-placeholder"):this.label.classList.remove("hide"),this.feedbackText.textContent=""))}handleKeydown(t){1===t.key.length&&(["0","1","2","3","4","5","6","7","8","9","."].includes(t.key)?"."===t.key&&t.target.value.includes(".")&&t.preventDefault():t.preventDefault())}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear)}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","decimal"),this.input.addEventListener("keydown",this.handleKeydown)):this.input.removeEventListener("keydown",this.handleKeydown):"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.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"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.clear),this.input.removeEventListener("keydown",this.handleKeydown)}}); \ No newline at end of file diff --git a/components/dist/notifications.js b/components/dist/notifications.js index 849ef48..a4f85f0 100644 --- a/components/dist/notifications.js +++ b/components/dist/notifications.js @@ -1,153 +1,172 @@ +//notifications + const smNotifications = document.createElement('template') smNotifications.innerHTML = ` - -
      -`; - - + .hide{ + opacity: 0 !important; + pointer-events: none !important; + } + .notification-panel{ + display: grid; + width: 100%; + gap: 0.5rem; + position: fixed; + left: 0; + top: 0; + z-index: 100; + max-height: 100%; + padding: 1rem; + overflow: hidden auto; + -ms-scroll-chaining: none; + overscroll-behavior: contain; + touch-action: none; + } + .notification-panel:empty{ + display:none; + } + .notification{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + border-radius: 0.3rem; + background: rgba(var(--foreground-color, (255,255,255)), 1); + overflow: hidden; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; + padding: 1rem; + align-items: center; + box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14); + touch-action: none; + } + .icon-container:not(:empty){ + margin-right: 0.5rem; + height: var(--icon-height); + width: var(--icon-width); + } + h4:first-letter, + p:first-letter{ + text-transform: uppercase; + } + h4{ + font-weight: 400; + } + p{ + line-height: 1.6; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + color: rgba(var(--text-color, (17,17,17)), 0.9); + overflow-wrap: break-word; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; + } + .notification:last-of-type{ + margin-bottom: 0; + } + .icon { + height: 100%; + width: 100%; + fill: rgba(var(--text-color, (17,17,17)), 0.7); + } + .icon--success { + fill: var(--green); + } + .icon--failure, + .icon--error { + fill: var(--danger-color); + } + .close{ + height: 2rem; + width: 2rem; + border: none; + cursor: pointer; + margin-left: 1rem; + border-radius: 50%; + padding: 0.3rem; + transition: background-color 0.3s, transform 0.3s; + background-color: transparent; + flex-shrink: 0; + } + .close:active{ + transform: scale(0.9); + } + .action{ + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem 0.8rem; + border-radius: 0.2rem; + border: none; + background-color: rgba(var(--text-color, (17,17,17)), 0.03); + font-family: inherit; + font-size: inherit; + color: var(--accent-color, teal); + font-weight: 500; + cursor: pointer; + } + @media screen and (max-width: 640px){ + .notification-panel:not(:empty){ + padding-bottom: 3rem; + } + } + @media screen and (min-width: 640px){ + .notification-panel{ + max-width: 28rem; + width: max-content; + top: auto; + bottom: 0; + } + .notification{ + width: auto; + border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); + } + } + @media (any-hover: hover){ + ::-webkit-scrollbar{ + width: 0.5rem; + } + + ::-webkit-scrollbar-thumb{ + background: rgba(var(--text-color, (17,17,17)), 0.3); + border-radius: 1rem; + &:hover{ + background: rgba(var(--text-color, (17,17,17)), 0.5); + } + } + .close:hover{ + background-color: rgba(var(--text-color, (17,17,17)), 0.1); + } + } + +
      + `; customElements.define('sm-notifications', class extends HTMLElement { constructor() { super(); @@ -166,7 +185,23 @@ customElements.define('sm-notifications', class extends HTMLElement { this.createNotification = this.createNotification.bind(this) this.removeNotification = this.removeNotification.bind(this) this.clearAll = this.clearAll.bind(this) + this.handlePointerMove = this.handlePointerMove.bind(this) + + this.startX = 0; + this.currentX = 0; + this.endX = 0; + this.swipeDistance = 0; + this.swipeDirection = ''; + this.swipeThreshold = 0; + this.startTime = 0; + this.swipeTime = 0; + this.swipeTimeThreshold = 200; + this.currentTarget = null; + + this.mediaQuery = window.matchMedia('(min-width: 640px)') + this.handleOrientationChange = this.handleOrientationChange.bind(this) + this.isLandscape = false } randString(length) { @@ -178,22 +213,27 @@ customElements.define('sm-notifications', class extends HTMLElement { } createNotification(message, options = {}) { - const { pinned = false, icon = '' } = options; - const notification = document.createElement('output') + const { pinned = false, icon = '', action } = options; + const notification = document.createElement('div') notification.id = this.randString(8) notification.classList.add('notification'); let composition = ``; composition += ` -
      ${icon}
      -

      ${message}

      - `; +
      ${icon}
      + ${message} + `; + if (action) { + composition += ` + + ` + } if (pinned) { notification.classList.add('pinned'); composition += ` - - `; + + `; } notification.innerHTML = composition; return notification; @@ -201,28 +241,48 @@ customElements.define('sm-notifications', class extends HTMLElement { push(message, options = {}) { const notification = this.createNotification(message, options); - this.notificationPanel.append(notification); + if (this.isLandscape) + this.notificationPanel.append(notification); + else + this.notificationPanel.prepend(notification); + this.notificationPanel.animate( + [ + { + transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`, + }, + { + transform: `none`, + }, + ], this.animationOptions + ) notification.animate([ { - transform: `translateY(1rem)`, + transform: `translateY(-1rem)`, opacity: '0' }, { transform: `none`, opacity: '1' }, - ], this.animationOptions); + ], this.animationOptions).onfinish = (e) => { + e.target.commitStyles() + e.target.cancel() + } + if (notification.querySelector('.action')) + notification.querySelector('.action').addEventListener('click', options.action.callback) return notification.id; } - removeNotification(notification) { + removeNotification(notification, direction = 'left') { + if (!notification) return; + const sign = direction === 'left' ? '-' : '+'; notification.animate([ { - transform: `none`, + transform: this.currentX ? `translateX(${this.currentX}px)` : `none`, opacity: '1' }, { - transform: `translateY(0.5rem)`, + transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`, opacity: '0' } ], this.animationOptions).onfinish = () => { @@ -236,13 +296,72 @@ customElements.define('sm-notifications', class extends HTMLElement { }); } + handlePointerMove(e) { + this.currentX = e.clientX - this.startX; + this.currentTarget.style.transform = `translateX(${this.currentX}px)`; + } + + handleOrientationChange(e) { + this.isLandscape = e.matches + if (e.matches) { + // landscape + + } else { + // portrait + } + } connectedCallback() { - this.notificationPanel.addEventListener('click', e => { + + this.handleOrientationChange(this.mediaQuery); + + this.mediaQuery.addEventListener('change', this.handleOrientationChange); + this.notificationPanel.addEventListener('pointerdown', e => { if (e.target.closest('.close')) { this.removeNotification(e.target.closest('.notification')); + } else if (e.target.closest('.notification')) { + this.swipeThreshold = e.target.closest('.notification').getBoundingClientRect().width / 2; + this.currentTarget = e.target.closest('.notification'); + this.currentTarget.setPointerCapture(e.pointerId); + this.startTime = Date.now(); + this.startX = e.clientX; + this.startY = e.clientY; + this.notificationPanel.addEventListener('pointermove', this.handlePointerMove); } }); - + this.notificationPanel.addEventListener('pointerup', e => { + this.endX = e.clientX; + this.endY = e.clientY; + this.swipeDistance = Math.abs(this.endX - this.startX); + this.swipeTime = Date.now() - this.startTime; + if (this.endX > this.startX) { + this.swipeDirection = 'right'; + } else { + this.swipeDirection = 'left'; + } + if (this.swipeTime < this.swipeTimeThreshold) { + if (this.swipeDistance > 50) + this.removeNotification(this.currentTarget, this.swipeDirection); + } else { + if (this.swipeDistance > this.swipeThreshold) { + this.removeNotification(this.currentTarget, this.swipeDirection); + } else { + this.currentTarget.animate([ + { + transform: `translateX(${this.currentX}px)`, + }, + { + transform: `none`, + }, + ], this.animationOptions).onfinish = (e) => { + e.target.commitStyles() + e.target.cancel() + } + } + } + this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove) + this.notificationPanel.releasePointerCapture(e.pointerId); + this.currentX = 0; + }); const observer = new MutationObserver(mutationList => { mutationList.forEach(mutation => { if (mutation.type === 'childList') { @@ -258,4 +377,7 @@ customElements.define('sm-notifications', class extends HTMLElement { childList: true, }); } + disconnectedCallback() { + mediaQueryList.removeEventListener('change', handleOrientationChange); + } }); \ No newline at end of file diff --git a/components/dist/notifications.min.js b/components/dist/notifications.min.js index 1786d2d..971af10 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)}randString(n){let t="";const o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i${i}\n

      ${n}

      \n `,o&&(e.classList.add("pinned"),r+='\n \n '),e.innerHTML=r,e}push(n,t={}){const o=this.createNotification(n,t);return this.notificationPanel.append(o),o.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),o.id}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),this.handlePointerMove=this.handlePointerMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isLandscape=!1}randString(n){let t="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let e=0;e${e}\n ${n}\n `,o&&(r+=`\n \n `),i&&(a.classList.add("pinned"),r+='\n \n '),a.innerHTML=r,a}push(n,t={}){const i=this.createNotification(n,t);return this.isLandscape?this.notificationPanel.append(i):this.notificationPanel.prepend(i),this.notificationPanel.animate([{transform:`translateY(${this.isLandscape?"":"-"}${i.clientHeight}px)`},{transform:"none"}],this.animationOptions),i.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=(n=>{n.target.commitStyles(),n.target.cancel()}),i.querySelector(".action")&&i.querySelector(".action").addEventListener("click",t.action.callback),i.id}removeNotification(n,t="left"){if(!n)return;const i="left"===t?"-":"+";n.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}handlePointerMove(n){this.currentX=n.clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(n){this.isLandscape=n.matches,n.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("pointerdown",n=>{n.target.closest(".close")?this.removeNotification(n.target.closest(".notification")):n.target.closest(".notification")&&(this.swipeThreshold=n.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=n.target.closest(".notification"),this.currentTarget.setPointerCapture(n.pointerId),this.startTime=Date.now(),this.startX=n.clientX,this.startY=n.clientY,this.notificationPanel.addEventListener("pointermove",this.handlePointerMove))}),this.notificationPanel.addEventListener("pointerup",n=>{this.endX=n.clientX,this.endY=n.clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=(n=>{n.target.commitStyles(),n.target.cancel()}),this.notificationPanel.removeEventListener("pointermove",this.handlePointerMove),this.notificationPanel.releasePointerCapture(n.pointerId),this.currentX=0});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})}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}}); \ No newline at end of file diff --git a/components/dist/pin-input.js b/components/dist/pin-input.js new file mode 100644 index 0000000..f6b2264 --- /dev/null +++ b/components/dist/pin-input.js @@ -0,0 +1,232 @@ +const pinInput = document.createElement('template'); +pinInput.innerHTML = ` + + +
      +
      + +
      +`; + +customElements.define('pin-input', + + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(pinInput.content.cloneNode(true)) + + this.pinDigits = 4 + + this.arrayOfInput = []; + this.container = this.shadowRoot.querySelector('.pin-container'); + this.toggleButton = this.shadowRoot.querySelector('button') + } + + set value(val) { + this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '') + } + + get value() { + return this.getValue() + } + + set pinLength(val) { + this.pinDigits = val + this.setAttribute('pin-length', val) + this.style.setProperty('--pin-length', val) + this.render() + } + + get isValid() { + return this.arrayOfInput.every(input => input.value.trim().length) + } + + clear = () => { + this.value = '' + } + + focusIn = () => { + this.arrayOfInput[0].focus(); + } + + getValue = () => { + return this.arrayOfInput.reduce((acc, val) => { + return acc += val.value + }, '') + } + + render = () => { + this.container.innerHTML = '' + const frag = document.createDocumentFragment(); + + for (let i = 0; i < this.pinDigits; i++) { + const inputBox = document.createElement('input') + inputBox.setAttribute('type', 'password') + inputBox.setAttribute('inputmode', 'numeric') + inputBox.setAttribute('maxlength', '1') + inputBox.setAttribute('required', '') + this.arrayOfInput.push(inputBox); + frag.append(inputBox); + } + this.container.append(frag); + } + + handleKeydown = (e) => { + const activeInput = e.target.closest('input') + if (/[0-9]/.test(e.key)) { + if (activeInput.value.trim().length > 2) { + e.preventDefault(); + } + else { + if (activeInput.value.trim().length === 1) { + activeInput.value = e.key + } + if (activeInput.nextElementSibling) { + setTimeout(() => { + activeInput.nextElementSibling.focus(); + }, 0) + } + } + } + else if (e.key === "Backspace") { + if (activeInput.previousElementSibling) + setTimeout(() => { + activeInput.previousElementSibling.focus(); + }, 0) + } + else if (e.key.length === 1 && !/[0-9]/.test(e.key)) { + e.preventDefault(); + } + } + + handleInput = () => { + if (this.isValid) { + this.fireEvent(this.getValue()) + } + } + + fireEvent = (value) => { + let event = new CustomEvent('pincomplete', { + bubbles: true, + cancelable: true, + composed: true, + detail: { + value + } + }); + this.dispatchEvent(event); + } + + toggleVisibility = () => { + if (this.arrayOfInput[0].getAttribute('type') === 'password') { + this.toggleButton.innerHTML = ` + + Hide + ` + this.arrayOfInput.forEach(input => input.setAttribute('type', 'text')) + } + else { + this.toggleButton.innerHTML = ` + + Show + ` + this.arrayOfInput.forEach(input => input.setAttribute('type', 'password')) + + } + } + + connectedCallback() { + if (this.hasAttribute('pin-length')) { + const pinLength = parseInt(this.getAttribute('pin-length')) + this.pinDigits = pinLength + this.style.setProperty('--pin-length', pinLength) + } + + this.render() + + this.toggleButton.addEventListener('click', this.toggleVisibility) + + this.container.addEventListener('input', this.handleInput); + this.container.addEventListener('keydown', this.handleKeydown); + } + disconnectedCallback() { + this.toggleButton.removeEventListener('click', this.toggleVisibility) + + this.container.removeEventListener('input', this.handleInput); + this.container.removeEventListener('keydown', this.handleKeydown); + } + }) \ No newline at end of file diff --git a/components/dist/popup.js b/components/dist/popup.js index 636405f..ba0dc53 100644 --- a/components/dist/popup.js +++ b/components/dist/popup.js @@ -1,3 +1,4 @@ +//popup class Stack { constructor() { this.items = []; @@ -30,9 +31,6 @@ smPopup.innerHTML = ` display: -ms-grid; display: grid; z-index: 10; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --width: 100%; --height: auto; --min-width: auto; @@ -87,7 +85,7 @@ smPopup.innerHTML = ` min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); - background: rgba(var(--background-color), 1); + background: rgba(var(--background-color, (255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } @@ -147,7 +145,7 @@ smPopup.innerHTML = ` .handle{ height: 0.3rem; width: 2rem; - background: rgba(var(--text-color), .4); + background: rgba(var(--text-color, (17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } @@ -158,10 +156,10 @@ smPopup.innerHTML = ` } ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color, (17,17,17))), 0.5); } } } @@ -201,7 +199,7 @@ customElements.define('sm-popup', class extends HTMLElement { this.popupContainer = this.shadowRoot.querySelector('.popup-container'); this.backdrop = this.shadowRoot.querySelector('.background'); - this.popup = this.shadowRoot.querySelector('.popup'); + this.dialogBox = this.shadowRoot.querySelector('.popup'); this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot'); this.popupHeader = this.shadowRoot.querySelector('.popup-top'); @@ -235,7 +233,7 @@ customElements.define('sm-popup', class extends HTMLElement { resumeScrolling() { const scrollY = document.body.style.top; window.scrollTo(0, parseInt(scrollY || '0') * -1); - document.body.style.overflow = 'auto'; + document.body.style.overflow = ''; document.body.style.top = 'initial'; } @@ -246,7 +244,7 @@ customElements.define('sm-popup', class extends HTMLElement { easing: 'ease' } const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})` - this.animateTo(this.popup, [ + this.animateTo(this.dialogBox, [ { opacity: this.offset ? 1 : 0, transform: initialAnimation @@ -311,7 +309,7 @@ customElements.define('sm-popup', class extends HTMLElement { { opacity: 1 }, { opacity: 0 } ], animOptions) - this.animateTo(this.popup, [ + this.animateTo(this.dialogBox, [ { opacity: 1, transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})` @@ -323,7 +321,7 @@ customElements.define('sm-popup', class extends HTMLElement { ], animOptions).finished .finally(() => { this.popupContainer.classList.add('hide'); - this.popup.style = '' + this.dialogBox.style = '' this.removeAttribute('open'); if (this.forms.length) { @@ -363,7 +361,7 @@ customElements.define('sm-popup', class extends HTMLElement { if (this.touchStartY < e.changedTouches[0].clientY) { this.offset = e.changedTouches[0].clientY - this.touchStartY; this.touchEndAnimation = window.requestAnimationFrame(() => { - this.popup.style.transform = `translateY(${this.offset}px)`; + this.dialogBox.style.transform = `translateY(${this.offset}px)`; }); } } @@ -372,7 +370,7 @@ customElements.define('sm-popup', class extends HTMLElement { this.touchEndTime = e.timeStamp; cancelAnimationFrame(this.touchEndAnimation); this.touchEndY = e.changedTouches[0].clientY; - this.threshold = this.popup.getBoundingClientRect().height * 0.3; + this.threshold = this.dialogBox.getBoundingClientRect().height * 0.3; if (this.touchEndTime - this.touchStartTime > 200) { if (this.touchEndY - this.touchStartY > this.threshold) { if (this.pinned) { @@ -412,7 +410,7 @@ customElements.define('sm-popup', class extends HTMLElement { } updateFocusableList() { - this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])') + this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])') this.autoFocus = this.querySelector('[autofocus]') } diff --git a/components/dist/popup.min.js b/components/dist/popup.min.js index 002f891..46c9acd 100644 --- a/components/dist/popup.min.js +++ b/components/dist/popup.min.js @@ -1 +1 @@ -class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,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.pinned=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".background"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.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.detectFocus=this.detectFocus.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,n){const i=t.animate(e,{...n,fill:"both"});return i.finished.then(()=>{i.commitStyles(),i.cancel()}),i}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="auto",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){const t={duration:300,easing:"ease"},e=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.popup,[{opacity:this.offset?1:0,transform:e},{opacity:1,transform:"none"}],t)}}show(t={}){const{pinned:e=!1}=t;if(!this.isOpen){const t={duration:300,easing:"ease"};popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],t),this.popupContainer.classList.remove("hide"),this.offset||this.backdrop.animate([{opacity:0},{opacity:1}],t),this.setStateOpen(),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this}})),this.pinned=e,this.isOpen=!0,document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`;const n=this.autoFocus||this.focusable[0];n.tagName.includes("SM-")?n.focusIn():n.focus(),this.hasAttribute("open")||this.setAttribute("open","")}}hide(){const t={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],t),this.animateTo(this.popup,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],t).finished.finally(()=>{this.popupContainer.classList.add("hide"),this.popup.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach(t=>t.reset()),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this}})),this.isOpen=!1}),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],t):this.resumeScrolling()}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY{this.popup.style.transform=`translateY(${this.offset}px)`}))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,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.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.key){const e=this.focusable[this.focusable.length-1],n=this.focusable[0];t.shiftKey&&document.activeElement===n?(t.preventDefault(),e.tagName.includes("SM-")?e.focusIn():e.focus()):t.shiftKey||document.activeElement!==e||(t.preventDefault(),n.tagName.includes("SM-")?n.focusIn():n.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]")}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.setStateOpen():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*t.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.mutationObserver=new MutationObserver(t=>{this.updateFocusableList()}),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.addEventListener("keydown",this.detectFocus),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.detectFocus),resizeObserver.unobserve(),this.mutationObserver.disconnect(),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0})}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}}); \ No newline at end of file +class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,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.pinned=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".background"),this.dialogBox=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.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.detectFocus=this.detectFocus.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,n){const i=t.animate(e,{...n,fill:"both"});return i.finished.then(()=>{i.commitStyles(),i.cancel()}),i}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){const t={duration:300,easing:"ease"},e=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.dialogBox,[{opacity:this.offset?1:0,transform:e},{opacity:1,transform:"none"}],t)}}show(t={}){const{pinned:e=!1}=t;if(!this.isOpen){const t={duration:300,easing:"ease"};popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],t),this.popupContainer.classList.remove("hide"),this.offset||this.backdrop.animate([{opacity:0},{opacity:1}],t),this.setStateOpen(),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this}})),this.pinned=e,this.isOpen=!0,document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`;const n=this.autoFocus||this.focusable[0];n.tagName.includes("SM-")?n.focusIn():n.focus(),this.hasAttribute("open")||this.setAttribute("open","")}}hide(){const t={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],t),this.animateTo(this.dialogBox,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],t).finished.finally(()=>{this.popupContainer.classList.add("hide"),this.dialogBox.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach(t=>t.reset()),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this}})),this.isOpen=!1}),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],t):this.resumeScrolling()}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY{this.dialogBox.style.transform=`translateY(${this.offset}px)`}))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.dialogBox.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.key){const e=this.focusable[this.focusable.length-1],n=this.focusable[0];t.shiftKey&&document.activeElement===n?(t.preventDefault(),e.tagName.includes("SM-")?e.focusIn():e.focus()):t.shiftKey||document.activeElement!==e||(t.preventDefault(),n.tagName.includes("SM-")?n.focusIn():n.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]")}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.setStateOpen():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*t.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.mutationObserver=new MutationObserver(t=>{this.updateFocusableList()}),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.addEventListener("keydown",this.detectFocus),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.detectFocus),resizeObserver.unobserve(),this.mutationObserver.disconnect(),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0})}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}}); \ No newline at end of file diff --git a/components/dist/radio.js b/components/dist/radio.js index 4588e18..01a48ad 100644 --- a/components/dist/radio.js +++ b/components/dist/radio.js @@ -8,9 +8,6 @@ smRadio.innerHTML = ` box-sizing: border-box; } :host{ - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --gap: 0.5rem; --height: 1.4rem; } @@ -36,16 +33,16 @@ smRadio.innerHTML = ` .outer-disc{ fill: none; stroke-width: 3; - stroke: rgba(var(--text-color), 0.7); + stroke: rgba(var(--text-color, (17,17,17)), 0.7); } .inner-disc{ - fill: var(--accent-color); + fill: var(--accent-color, teal); transition: transform 0.3s; transform: scale(0); transform-origin: center; } :host([checked]) .outer-disc{ - stroke: var(--accent-color); + stroke: var(--accent-color, teal); } :host([checked]) .inner-disc{ transform: scale(1); @@ -128,7 +125,7 @@ window.customElements.define('sm-radio', class extends HTMLElement { this.dispatchEvent(new CustomEvent(`changed${this.getAttribute('name')}`, this.options)) } } - handleKeyDown(e){ + handleKeyDown(e) { if (e.code === "Space") { e.preventDefault() this.handleClick() @@ -139,7 +136,7 @@ window.customElements.define('sm-radio', class extends HTMLElement { this.setAttribute('checked', '') this.dispatchGroupEvent() } - + } handleRadioGroup(e) { if (e.detail.uid !== this.uniqueId) { diff --git a/components/dist/radio.min.js b/components/dist/radio.min.js index 88d676a..19b842f 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.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}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))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n --gap: 0.5rem;\n --height: 1.4rem;\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .hide{\n display: none !important;\n }\n .radio{\n display: flex;\n cursor: pointer;\n }\n .radio__button{\n position: relative;\n height: var(--height);\n width: var(--height);\n overflow: visible;\n padding: 0.1rem;\n }\n .outer-disc{\n fill: none;\n stroke-width: 3;\n stroke: rgba(var(--text-color, (17,17,17)), 0.7);\n }\n .inner-disc{\n fill: var(--accent-color, teal);\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: center;\n }\n :host([checked]) .outer-disc{\n stroke: var(--accent-color, teal);\n }\n :host([checked]) .inner-disc{\n transform: scale(1);\n }\n\n @media (any-hover: hover){\n }\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.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}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))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n
      - +
      @@ -143,9 +140,11 @@ customElements.define('sm-select', class extends HTMLElement { this.handleOptionSelection = this.handleOptionSelection.bind(this) this.handleKeydown = this.handleKeydown.bind(this) this.handleClickOutside = this.handleClickOutside.bind(this) + this.selectOption = this.selectOption.bind(this) this.availableOptions this.previousOption + this._value = undefined; this.isOpen = false; this.label = '' this.slideDown = [{ @@ -173,7 +172,6 @@ customElements.define('sm-select', class extends HTMLElement { } this.optionList = this.shadowRoot.querySelector('.options') - this.chevron = this.shadowRoot.querySelector('.toggle') this.selection = this.shadowRoot.querySelector('.selection') this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text') } @@ -187,12 +185,7 @@ customElements.define('sm-select', class extends HTMLElement { const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val) if (selectedOption) { this.setAttribute('value', val) - this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`; - if (this.previousOption) { - this.previousOption.classList.remove('check-selected') - } - selectedOption.classList.add('check-selected') - this.previousOption = selectedOption + this.selectOption(selectedOption) } else { console.warn(`There is no option with ${val} as value`) } @@ -200,19 +193,25 @@ customElements.define('sm-select', class extends HTMLElement { reset(fire = true) { if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { - const firstElement = this.availableOptions[0]; - if (this.previousOption) { - this.previousOption.classList.remove('check-selected') - } - firstElement.classList.add('check-selected') - this.value = firstElement.getAttribute('value') - this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}` - this.previousOption = firstElement; + const selectedOption = this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0]; + this.value = selectedOption.getAttribute('value') if (fire) { this.fireEvent() } } } + selectOption(selectedOption) { + if (this.previousOption) { + this.previousOption.classList.remove('check-selected') + this.previousOption.removeAttribute('selected') + } + if (this.previousOption !== selectedOption) { + selectedOption.classList.add('check-selected') + selectedOption.setAttribute('selected', '') + this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`; + this.previousOption = selectedOption + } + } focusIn() { this.selection.focus() @@ -221,11 +220,11 @@ customElements.define('sm-select', class extends HTMLElement { open() { this.optionList.classList.remove('hide') this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') + this.setAttribute('open', '') this.isOpen = true } collapse() { - this.chevron.classList.remove('rotate') + this.removeAttribute('open') this.optionList.animate(this.slideUp, this.animationOptions) .onfinish = () => { this.optionList.classList.add('hide') @@ -317,6 +316,11 @@ customElements.define('sm-select', class extends HTMLElement { let slot = this.shadowRoot.querySelector('slot') slot.addEventListener('slotchange', e => { this.availableOptions = slot.assignedElements() + this.availableOptions.forEach(elem => { + if (elem.hasAttribute('selected')) { + this._value = elem.value; + } + }); this.reset(false) }); this.addEventListener('click', this.handleClick) @@ -374,13 +378,13 @@ smOption.innerHTML = ` } :host(:focus){ outline: none; - background: rgba(var(--text-color), 0.1); + background: rgba(var(--text-color,(17,17,17)), 0.1); } .icon { opacity: 0; height: 1.2rem; width: 1.2rem; - fill: rgba(var(--text-color), 0.8); + fill: rgba(var(--text-color,(17,17,17)), 0.8); } :host(:focus) .option .icon{ opacity: 0.4 @@ -390,7 +394,7 @@ smOption.innerHTML = ` } @media (hover: hover){ .option:hover{ - background: rgba(var(--text-color), 0.1); + background: rgba(var(--text-color,(17,17,17)), 0.1); } :host(:not(.check-selected):hover) .icon{ opacity: 0.4 diff --git a/components/dist/select.min.js b/components/dist/select.min.js index 900a94c..1b87aed 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
      ',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.availableOptions,this.previousOption,this.isOpen=!1,this.label="",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"},this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label"]}get value(){return this.getAttribute("value")}set value(t){const e=this.availableOptions.find(e=>e.getAttribute("value")===t);e?(this.setAttribute("value",t),this.selectedOptionText.textContent=`${this.label}${e.textContent}`,this.previousOption&&this.previousOption.classList.remove("check-selected"),e.classList.add("check-selected"),this.previousOption=e):console.warn(`There is no option with ${t} as value`)}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions[0];this.previousOption&&this.previousOption.classList.remove("check-selected"),e.classList.add("check-selected"),this.value=e.getAttribute("value"),this.selectedOptionText.textContent=`${this.label}${e.textContent}`,this.previousOption=e,t&&this.fireEvent()}}focusIn(){this.selection.focus()}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.key&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.fireEvent())}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.key?(t.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(t)):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.collapse()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{this.availableOptions=t.assignedElements(),this.reset(!1)}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(t){"disabled"===t?this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
      \n \n \n
      ',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0")}}); \ No newline at end of file +const smSelect=document.createElement("template");smSelect.innerHTML='\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.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.selectOption=this.selectOption.bind(this),this.availableOptions,this.previousOption,this._value=void 0,this.isOpen=!1,this.label="",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"},this.optionList=this.shadowRoot.querySelector(".options"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label"]}get value(){return this.getAttribute("value")}set value(t){const e=this.availableOptions.find(e=>e.getAttribute("value")===t);e?(this.setAttribute("value",t),this.selectOption(e)):console.warn(`There is no option with ${t} as value`)}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions.find(t=>t.hasAttribute("selected"))||this.availableOptions[0];this.value=e.getAttribute("value"),t&&this.fireEvent()}}selectOption(t){this.previousOption&&(this.previousOption.classList.remove("check-selected"),this.previousOption.removeAttribute("selected")),this.previousOption!==t&&(t.classList.add("check-selected"),t.setAttribute("selected",""),this.selectedOptionText.textContent=`${this.label}${t.textContent}`,this.previousOption=t)}focusIn(){this.selection.focus()}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.setAttribute("open",""),this.isOpen=!0}collapse(){this.removeAttribute("open"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.key&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.fireEvent())}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.key?(t.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(t)):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.collapse()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{this.availableOptions=t.assignedElements(),this.availableOptions.forEach(t=>{t.hasAttribute("selected")&&(this._value=t.value)}),this.reset(!1)}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(t){"disabled"===t?this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
      \n \n \n
      ',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0")}}); \ No newline at end of file diff --git a/components/dist/spinner.js b/components/dist/spinner.js index 1282641..f2f970f 100644 --- a/components/dist/spinner.js +++ b/components/dist/spinner.js @@ -7,17 +7,12 @@ spinner.innerHTML = ` -webkit-box-sizing: border-box; box-sizing: border-box; } -:host{ - --accent-color: #4d2588; - --height: 1.6rem; - --width: 1.6rem; -} .loader { - height: var(--height); - width: var(--weight); + height: var(--size, 1.5rem); + width: var(--size, 1.5rem); stroke-width: 8; overflow: visible; - stroke: var(--accent-color); + stroke: var(--accent-color, teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; diff --git a/components/dist/spinner.min.js b/components/dist/spinner.min.js index b364bae..33542ef 100644 --- a/components/dist/spinner.min.js +++ b/components/dist/spinner.min.js @@ -1 +1 @@ -const spinner=document.createElement("template");spinner.innerHTML='\n\n\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader); \ No newline at end of file +const spinner=document.createElement("template");spinner.innerHTML='\n\n\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader); \ No newline at end of file diff --git a/components/dist/strip-select.js b/components/dist/strip-select.js index 32ba04d..36242c2 100644 --- a/components/dist/strip-select.js +++ b/components/dist/strip-select.js @@ -8,9 +8,6 @@ stripSelect.innerHTML = ` box-sizing: border-box; } :host{ - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; padding: 1rem 0; } .hide{ @@ -50,7 +47,7 @@ stripSelect.innerHTML = ` cursor: pointer; position: absolute; align-items: center; - background: rgba(var(--background-color), 1); + background: rgba(var(--background-color,(255,255,255)), 1); transform: translateY(-50%); } .nav-button--right{ @@ -69,7 +66,7 @@ stripSelect.innerHTML = ` .icon{ height: 1.5rem; width: 1.5rem; - fill: rgba(var(--text-color), .8); + fill: rgba(var(--text-color,(17,17,17)), .8); } @media (hover: none){ ::-webkit-scrollbar { @@ -85,11 +82,11 @@ stripSelect.innerHTML = ` width: 2rem; } .cover--left{ - background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent); + background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent); } .cover--right{ right: 0; - background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1)); + background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1)); } } @media (hover: hover){ @@ -104,11 +101,11 @@ stripSelect.innerHTML = ` overflow: hidden; } .cover--left{ - background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent); + background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent); } .cover--right{ right: 0; - background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%); + background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%); } } @@ -137,14 +134,19 @@ customElements.define('strip-select', class extends HTMLElement { this.slottedOptions = undefined; this._value = undefined; this.scrollDistance = 0; + this.assignedElements = []; this.scrollLeft = this.scrollLeft.bind(this); this.scrollRight = this.scrollRight.bind(this); this.fireEvent = this.fireEvent.bind(this); + this.setSelectedOption = this.setSelectedOption.bind(this); } get value() { return this._value; } + set value(val) { + this.setSelectedOption(val); + } scrollLeft() { this.stripSelect.scrollBy({ left: -this.scrollDistance, @@ -158,6 +160,19 @@ customElements.define('strip-select', class extends HTMLElement { behavior: 'smooth' }); } + setSelectedOption(value) { + if (this._value === value) return + this._value = value; + this.assignedElements.forEach(elem => { + if (elem.value === value) { + elem.setAttribute('active', ''); + elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); + } + else + elem.removeAttribute('active') + }); + } + fireEvent() { this.dispatchEvent( new CustomEvent("change", { @@ -178,17 +193,17 @@ customElements.define('strip-select', class extends HTMLElement { const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left'); const navButtonRight = this.shadowRoot.querySelector('.nav-button--right'); slot.addEventListener('slotchange', e => { - const assignedElements = slot.assignedElements(); - assignedElements.forEach(elem => { + this.assignedElements = slot.assignedElements(); + this.assignedElements.forEach(elem => { if (elem.hasAttribute('selected')) { elem.setAttribute('active', ''); this._value = elem.value; } }); if (!this.hasAttribute('multiline')) { - if (assignedElements.length > 0) { - firstOptionObserver.observe(slot.assignedElements()[0]); - lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]); + if (this.assignedElements.length > 0) { + firstOptionObserver.observe(this.assignedElements[0]); + lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]); } else { navButtonLeft.classList.add('hide'); @@ -215,10 +230,7 @@ customElements.define('strip-select', class extends HTMLElement { resObs.observe(this); this.stripSelect.addEventListener('option-clicked', e => { if (this._value !== e.target.value) { - this._value = e.target.value; - slot.assignedElements().forEach(elem => elem.removeAttribute('active')); - e.target.setAttribute('active', ''); - e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); + this.setSelectedOption(e.target.value); this.fireEvent(); } }); @@ -273,9 +285,6 @@ stripOption.innerHTML = ` -webkit-box-sizing: border-box; box-sizing: border-box; } - :host{ - --background-color: inherit; - } .strip-option{ display: flex; flex-shrink: 0; @@ -287,17 +296,17 @@ stripOption.innerHTML = ` -webkit-tap-highlight-color: transparent; } :host([active]) .strip-option{ - color: var(--active-option-color, inherit); - background-color: var(--active-background-color, rgba(var(--text-color), 0.06)); + color: var(--active-option-color, rgba(var(--background-color,white))); + background-color: var(--active-background-color, var(--accent-color,teal)); } :host(:focus-within){ outline: none; } :host(:focus-within) .strip-option{ - box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } :host(:hover:not([active])) .strip-option{ - background-color: rgba(var(--text-color), 0.06); + background-color: rgba(var(--text-color,(17,17,17)), 0.06); }