RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New components

Browse Source
This commit is contained in:
sairaj mote 2021-07-10 16:55:55 +05:30
parent f66f8ea3d2
commit 15357150d4
47 changed files with 11078 additions and 1805 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Standard UI Components/.gitattributes vendored Normal file
View File

@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

83
Standard UI Components/README.md
View File

@ -51,7 +51,6 @@ Now you are ready to use them in your HTML markup as any other standard HMTL tag
| [Carousel](#carousel) |
| [Checkbox](#checkbox) |
| [Input](#input) |
| [Menu](#menu) |
| [Notifications](#notifications) |
| [Popup](#popup) |
| [Switch](#switch) |
@ -89,16 +88,19 @@ Variants are different stylistic versions of same component, But they have same
#### Disabled State
These can disabled adding `disable` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further.
These can disabled adding `disabled="true` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further.
```html
<sm-button disable>Disabled</sm-button>
<sm-button disabled="true">Disabled</sm-button>
```
#### Custom Events
1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disable` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.
1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disabled="true"` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.
2. `disabled` event fires when button is disabled and user tries to click on it. This event can be useful if you want to validate a form but user clicked submit before all data so you show message according to situation.
#### Is it ***Responsive***?
No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-button{
width: 100%;
@ -166,22 +168,22 @@ This has two custom attributes `checked` and `disabled`.
1. Checked
```html
<!--To set checkbox as checked-->
<sm-checkbox checked></sm-checkbox>
<sm-checkbox checked="true"></sm-checkbox>
```
2. disabled
```html
<!-- To set disabled -->
<sm-checkbox disable></sm-checkbox>
<sm-checkbox disabled="true"></sm-checkbox>
```
#### Disabled State
This component can disabled adding `disable` attribute.
This component can disabled adding `disabled="true` attribute.
You can also have option to use both of these attributes at the same time.
```html
<!-- Setting checkbox true while it's disabled -->
<sm-checkbox disable checked></sm-checkbox>
<sm-checkbox disabled="true" checked="true"></sm-checkbox>
```
#### Supported Events
@ -205,7 +207,7 @@ let myCheckbox = document.getElementById('my_checkbox');
```
##### To set checked
```js
checkbox.checked = true
checkbox.checked="true"
//or
myCheckbox.setAttribute('checked', 'true')
```
@ -213,9 +215,9 @@ Replace `"true"` with `"false"` to un-tick checkbox
##### To set disabled
```js
myCheckbox.disabled = true
myCheckbox.disabled="true"
//or
myCheckbox.setAttribute('disable', '')
myCheckbox.setAttribute('disabled', 'true')
```
### Input
@ -243,7 +245,9 @@ By default placeholder will disappear when input field has some value.
All events supported by traditional input.
#### Is it ***Responsive***?
No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-input{
width: 100%;
@ -274,32 +278,6 @@ console.log(myInput.value)
console.log(myInput.isValid)
```
### Menu
[See Demo](https://sairaj-mote.github.io/components/)
```html
<sm-menu></sm-menu>
```
You can add options using `<sm-menu-option></sm-menu-option>` instead of `<option>`.
#### Syntax
```html
<sm-menu id="my_menu">
<sm-menu-option>first option</sm-menu-option>
<sm-menu-option>second option</sm-menu-option>
<sm-menu-option>third option</sm-menu-option>
</sm-menu>
```
#### Is it ***Responsive***?
No, As by default this is an inline element that means it won't strech accross whole horizontal space.
#### Accessibility
This component supports keyboard interactivity like ***Enter*** or ***Spacebar*** to expand/collapse options. ***Arrow keys*** can be used to navigate between options.
Also can be accessed using ***Tab***.
### Notifications
[See Demo](https://sairaj-mote.github.io/components/)
@ -427,12 +405,12 @@ This has two custom attributes `checked` and `disabled`.
1. Checked
```html
<!--To set switch as checked or on -->
<sm-switch checked></sm-switch>
<sm-switch checked="true"></sm-switch>
```
2. disabled
```html
<!--To set switch as disabled -->
<sm-switch disabled></sm-switch>
<sm-switch disabled="true"></sm-switch>
```
#### Disabled State
@ -442,7 +420,7 @@ This component can disabled adding `disabled="true` attribute.
You can also have option to use both of these attributes at the same time.
```html
<!-- Setting switch checked true while it's disabled -->
<sm-checkbox disable checked></sm-checkbox>
<sm-checkbox disabled="true" checked="true"></sm-checkbox>
```
#### Supported Events
@ -466,17 +444,19 @@ let mySwitch = document.getElementById('mySwitch');
```
##### To set checked
```js
mySwitch.checked = true
mySwitch.checked="true"
//or
mySwitch.setAttribute('checked', '')
mySwitch.setAttribute('checked', 'true')
```
Replace `"true"` with `"false"` to turn switch off.
##### To set disabled
```js
mySwitch.disabled = true
mySwitch.disabled="true"
//or
mySwitch.setAttribute('disable', '')
mySwitch.setAttribute('disabled', 'true')
```
Replace `"true"` with `"false"` to enable switch.
### Select
[See Demo](https://sairaj-mote.github.io/components/)
@ -501,6 +481,9 @@ You can specify `sm-option` value using `value=""` attribute in option markup.
This supports `change` event that fires when new value is selected from dropdown.
#### Is it ***Responsive***?
No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-select{
width: 100%;
@ -577,7 +560,15 @@ This component supports keyboard interactivity like ***Enter*** or ***Spacebar**
Notice how every `sm-tab` is folloed by `sm-option`, This is default structure or syntax for using `sm-tabs`. ***If you didn't add a panel after a tab, the component won't work.***
Another key part is `sm-tab` should have `slot="tab"` as attribute and `slot="panel"` for `sm-panel`. As this component uses HTML5 ***[<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)*** tag to organize user added data. For more information, please refer to this [MDN article](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots).
#### Custom Attributes
1. enable-flick
```html
<!--To enable flick gesture to change panel in view -->
<sm-tabs enable-flick="true">
//Tabs body
</sm-tabs>
```
#### Variants
Variants are different stylistic versions of same component, But they have same functions.
@ -590,6 +581,9 @@ Setting this variant will change default sliding indicator to a block for provid
</sm-tabs>
```
#### Is it ***Responsive***?
Yes, it will adjust according to screen size and input interrfaces like mouse, touch.
#### Interactions
@ -598,3 +592,4 @@ This supports touch gesture flick to change visible panels if enabled with `enab
#### Accessibility
This component supports keyboard interactivity like ***Enter*** or ***Spacebar*** to select an option. Also can be accessed using ***Tab***.

5
Standard UI Components/_config.yml Normal file
View File

@ -0,0 +1,5 @@
theme: jekyll-theme-minimal
highlighter: rouge
markdown: kramdown
kramdown:
input: GFM

2480
Standard UI Components/components.js
View File

File diff suppressed because it is too large Load Diff

1
Standard UI Components/components.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3591
Standard UI Components/components.ts Normal file
View File

File diff suppressed because it is too large Load Diff

713
Standard UI Components/css/main.css
View File

@ -1,272 +1,609 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
html {
:root {
font-size: clamp(1rem, 1.2vmax, 3rem);
}
html, body {
height: 100%;
scroll-behavior: smooth;
}
body {
--accent-color: rgb(9, 155, 82);
--light-accent-shade: rgb(223, 255, 239);
--text: 17, 17, 17;
--foreground: 255, 255, 255;
--font-family: 'Roboto', sans-serif;
--accent-color: #4d2588;
--light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17;
--text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--error-color: red;
--green: #00843b;
color: rgba(var(--text-color), 1);
background: var(--background-color);
}
body[data-theme=dark] {
--accent-color: #976dd6;
--green: #13ff5a;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--error-color: rgb(255, 106, 106);
}
.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;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
p {
font-size: 0.8;
max-width: 75ch;
line-height: 1.7;
color: rgba(var(--text-color), 0.8);
}
p:not(:last-of-type) {
margin-bottom: 1rem;
}
img {
object-fit: cover;
}
a {
color: inherit;
text-decoration: none;
}
a:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
}
button {
display: inline-flex;
border: none;
background-color: inherit;
}
a:any-link:focus-visible {
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
sm-button {
--border-radius: 0.3rem;
}
ul {
list-style: none;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hide {
opacity: 0;
pointer-events: none;
}
.hide-completely {
display: none;
display: none !important;
}
h1, h2, h3, h4.h5 {
font-family: 'Poppins', sans-serif;
.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;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.grid-3 {
grid-template-columns: 1fr auto auto;
}
.flow-column {
grid-auto-flow: column;
}
.gap-0-5 {
gap: 0.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;
}
a:-webkit-any-link {
text-decoration: none;
.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(var(--text-color), 0.16);
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;
}
.button__icon--left {
margin-right: 0.5rem;
}
.button__icon--right {
margin-left: 0.5rem;
}
.theme-switcher {
position: relative;
justify-self: flex-end;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme-switcher .icon {
position: absolute;
transition: transform 0.6s;
}
.theme-switcher__checkbox {
display: none;
}
.theme-switcher__checkbox:checked ~ .moon-icon {
transform: scale(0) rotate(90deg);
}
.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
transform: scale(0) rotate(-90deg);
}
pre .str, code .str {
color: #65B042;
}
/* string - green */
pre .kwd, code .kwd {
color: #E28964;
}
/* keyword - dark pink */
pre .com, code .com {
color: #AEAEAE;
font-style: italic;
}
/* comment - gray */
pre .typ, code .typ {
color: #4395ff;
}
/* type - light blue */
pre .lit, code .lit {
color: #1a76c2;
}
/* literal */
pre .pun, code .pun {
color: rgba(var(--text-color), 0.8);
}
/* punctuation */
pre .pln, code .pln {
color: rgba(var(--text-color), 0.8);
}
/* plaintext */
pre .tag, code .tag {
color: #22863a;
}
/* html/xml tag */
pre .atn, code .atn {
color: #005cc5;
}
/* html/xml attribute name */
pre .atv, code .atv {
color: var(--accent-color);
}
a:-moz-any-link {
text-decoration: none;
color: var(--accent-color);
/* html/xml attribute value*/
pre .dec, code .dec {
color: #3387CC;
}
a:any-link {
text-decoration: none;
color: var(--accent-color);
/* decimal - blue */
pre {
max-width: 100%;
margin: 1rem 0;
padding: 0 1.5rem;
overflow-x: auto;
font-size: 0.9rem;
white-space: pre-line;
border-radius: 0.5rem;
background: rgba(var(--text-color), 0.04);
}
code {
font-family: "Roboto Mono", monospace;
border-radius: 0.2rem;
font-weight: 400;
padding: 0.2rem 0.4rem;
background: rgba(var(--text-color), 0.04);
}
code > * {
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;
}
h2:first-of-type {
margin-top: 1rem;
}
h1.headline {
color: rgba(var(--text), 1);
}
section {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-size: cover;
text-align: center;
color: rgba(var(--text), 1);
padding: 2rem;
border-bottom: 1px solid rgba(var(--text), 0.2);
}
section h1 {
font-weight: 600;
font-size: 2.5rem;
line-height: 1.2em;
z-index: 1;
text-transform: uppercase;
letter-spacing: 0.2rem;
}
section h4 {
z-index: 1;
font-weight: 400;
margin-top: 1.2rem;
}
section .background-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
position: absolute;
border: solid 1px rgba(var(--text), 0.3);
width: 60vw;
height: 40%;
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
background: rgba(var(--foreground), 1);
z-index: -1;
}
section a {
margin-top: 2rem;
font-weight: 500;
}
section sm-button {
margin-top: 4rem;
}
section sm-button:first-of-type {
margin-right: 1rem;
}
pre {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
max-width: 100%;
}
code {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: #311B92;
background: rgba(var(--text), 0.1);
padding: 0.2rem 0.4rem;
border-radius: 0.2rem;
margin: 0.2rem 0;
}
code.extend {
padding: 0 1.5rem;
line-height: 1.6;
margin: 1rem 0;
overflow-x: auto;
max-width: 100%;
}
main {
height: 100vh;
display: grid;
height: 100%;
}
p {
margin: 1rem 0 1.5rem 0;
line-height: 1.6em;
color: rgba(var(--text), 0.8);
font-size: 1rem;
#main_header {
padding: 0.5rem 1.5rem;
border-bottom: 1px solid rgba(var(--text-color), 0.1);
}
p::first-letter {
text-transform: capitalize;
#side_nav_button {
padding: 0.5rem;
margin-left: -0.5rem;
}
ol {
padding: 0.6rem 1rem;
#backdrop {
position: fixed;
z-index: 4;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
ol li {
margin-bottom: 1rem;
}
ol li:last-of-type {
margin-bottom: 0;
}
ol li::first-letter {
text-transform: capitalize;
}
.left {
#side_nav,
.right {
max-height: 100%;
overflow-y: auto;
padding-bottom: 3rem;
}
.left h3 {
padding: 1.5rem;
#side_nav h4 {
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 1rem 1.5rem;
}
.right {
padding: 1.5rem;
}
.right h1 {
margin-bottom: 1.5rem;
}
.list {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0.5rem;
flex-direction: column;
margin-bottom: 0.8rem;
}
.list .item {
padding: 0.6rem 1.5rem;
.list__item {
display: flex;
padding: 0.8rem 1.5rem;
text-transform: capitalize;
}
.list .active {
.list__item--active {
color: var(--accent-color);
background: rgba(var(--text), 0.06);
background: rgba(var(--text-color), 0.06);
}
.card {
height: 24rem;
display: flex;
flex-direction: column;
margin-right: 1rem;
border-radius: 0.4rem;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
padding: 1.5rem;
min-width: min(24rem, 80%);
background-color: rgba(var(--text-color), 0.06);
}
sm-carousel {
margin-bottom: 1rem;
}
@media screen and (min-width: 640px) {
main {
display: -ms-grid;
display: grid;
-ms-grid-columns: 14rem minmax(0, 1fr);
grid-template-columns: 14rem minmax(0, 1fr);
gap: 1.5rem;
}
p {
max-width: 46vw;
}
.background-box {
width: 24rem !important;
height: 50% !important;
}
sm-tab-header {
margin-bottom: 1.5rem;
}
.page {
display: flex;
flex-direction: column;
}
ol {
padding: 0.6rem 1rem;
}
ol li {
margin-bottom: 1rem;
}
ol li:last-of-type {
margin-bottom: 0;
}
ol li::first-letter {
text-transform: capitalize;
}
#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;
}
@media screen and (max-width: 640px) {
.left {
main {
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
}
#side_nav {
display: flex;
flex-direction: column;
position: fixed;
z-index: 2;
background: rgba(var(--foreground), 1);
-webkit-box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
height: 100vh;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
z-index: 5;
height: 100%;
width: calc(100% - 4rem);
transition: transform 0.3s;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
}
#side_nav:not(.reveal) {
transform: translateX(-100%);
}
.reveal {
transform: none;
}
}
@media screen and (min-width: 640px) {
#main_header {
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;
}
#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) {
.item:hover {
background: rgba(var(--text), 0.1);
::-webkit-scrollbar {
width: 0.5rem;
height: 0.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;
}
}
/*# sourceMappingURL=main.css.map */
}

10
Standard UI Components/css/main.css.map
View File

@ -1,9 +1 @@
{
"version": 3,
"mappings": "AAAA,OAAO,CAAC,wFAAI;AACZ,OAAO,CAAC,yFAAI;AACZ,AAAA,CAAC,CAAA;EACG,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,oBAAoB;CACpC;;AACD,AAAA,IAAI,CAAA;EACA,eAAe,EAAE,MAAM;CAC1B;;AACD,AAAA,IAAI,CAAA;EACA,cAAc,CAAA,gBAAC;EACf,oBAAoB,CAAA,mBAAC;EACrB,MAAM,CAAA,WAAC;EACP,YAAY,CAAA,cAAC;EACb,aAAa,CAAA,qBAAC;EACd,aAAa,CAAA,IAAC;CACjB;;AACD,AAAA,gBAAgB,CAAA;EACZ,OAAO,EAAE,IAAI;CAChB;;AACD,AAAA,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,AAAA,GAAG,CAAA;EACV,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,GAAG;CACnB;;AACD,AAAA,CAAC,AAAA,SAAS,CAAA;EACN,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,mBAAmB;CAC7B;;AACD,AAAA,EAAE,CAAA;EACA,MAAM,EAAE,aAAa;EACrB,cAAc,EAAE,UAAU;CAI3B;;AAND,AAGE,EAHA,AAGC,cAAc,CAAA;EACX,UAAU,EAAE,IAAI;CACnB;;AAEH,AAAA,EAAE,AAAA,SAAS,CAAA;EACP,KAAK,EAAE,oBAAoB;CAC9B;;AACD,AAAA,OAAO,CAAA;EACH,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,KAAK;EACtB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,oBAAoB;EAC3B,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG,CAAC,KAAK,CAAC,sBAAqB;CAmCjD;;AA7CD,AAWI,OAXG,CAWH,EAAE,CAAA;EACE,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,KAAK;EAClB,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,SAAS;EACzB,cAAc,EAAE,MAAM;CACzB;;AAlBL,AAmBI,OAnBG,CAmBH,EAAE,CAAA;EACE,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;CACrB;;AAvBL,AAwBI,OAxBG,CAwBH,eAAe,CAAA;EACX,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,sBAAsB;EACxC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE,0BAA0B;EACtC,OAAO,EAAE,EAAE;CACd;;AAlCL,AAmCI,OAnCG,CAmCH,CAAC,CAAA;EACG,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;CACnB;;AAtCL,AAuCI,OAvCG,CAuCH,SAAS,CAAA;EACL,UAAU,EAAE,IAAI;CACnB;;AAzCL,AA0CI,OA1CG,CA0CH,SAAS,AAAA,cAAc,CAAA;EACnB,YAAY,EAAE,IAAI;CACrB;;AAEL,AAAA,GAAG,CAAA;EACC,OAAO,EAAE,WAAW;EAChB,SAAS,EAAE,IAAI;CACtB;;AACD,AAAA,IAAI,CAAA;EACA,OAAO,EAAE,WAAW;EACpB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,sBAAqB;EACjC,OAAO,EAAE,aAAa;EACtB,aAAa,EAAE,MAAM;EACrB,MAAM,EAAE,QAAQ;CACnB;;AACD,AAAA,IAAI,AAAA,OAAO,CAAA;EACP,OAAO,EAAE,QAAQ;EACjB,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,KAAK;CAChB;;AACD,AAAA,CAAC,CAAA;EACG,MAAM,EAAE,eAAe;EACvB,WAAW,EAAE,KAAK;EAClB,KAAK,EAAE,sBAAqB;EAC5B,SAAS,EAAE,IAAI;CAIlB;;AARD,AAKI,CALH,AAKI,cAAc,CAAA;EACX,cAAc,EAAE,UAAU;CAC7B;;AAEL,AAAA,EAAE,CAAA;EACE,OAAO,EAAE,WAAW;CAUvB;;AAXD,AAEI,EAFF,CAEE,EAAE,CAAA;EACE,aAAa,EAAE,IAAI;CAOtB;;AAVL,AAIQ,EAJN,CAEE,EAAE,AAEG,aAAa,CAAA;EACV,aAAa,EAAE,CAAC;CACnB;;AANT,AAOQ,EAPN,CAEE,EAAE,AAKG,cAAc,CAAA;EACX,cAAc,EAAE,UAAU;CAC7B;;AAGT,AAAA,KAAK,CAAA;EACD,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;CAInB;;AAND,AAGI,KAHC,CAGD,EAAE,CAAA;EACE,OAAO,EAAE,MAAM;CAClB;;AAEL,AAAA,MAAM,CAAA;EACF,OAAO,EAAE,MAAM;CAIlB;;AALD,AAEI,MAFE,CAEF,EAAE,CAAA;EACE,aAAa,EAAE,MAAM;CACxB;;AAEL,AAAA,KAAK,CAAA;EACD,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,aAAa,EAAE,MAAM;CASxB;;AAbD,AAKI,KALC,CAKD,KAAK,CAAA;EACD,OAAO,EAAE,aAAa;EACtB,cAAc,EAAE,UAAU;CAC7B;;AARL,AASI,KATC,CASD,OAAO,CAAA;EACH,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE,uBAAsB;CACrC;;AAEL,AAAA,KAAK,CAAA;EACD,MAAM,EAAE,KAAK;EACb,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,MAAM;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;CACpB;;AACD,AAAA,WAAW,CAAA;EACP,aAAa,EAAE,IAAI;CACtB;;AACD,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAC/B,AAAA,IAAI,CAAA;IACA,OAAO,EAAE,IAAI;IACb,qBAAqB,EAAE,KAAK,CAAC,cAAc;IAC3C,GAAG,EAAE,MAAM;GACd;EACD,AAAA,CAAC,CAAA;IACG,SAAS,EAAE,IAAI;GAClB;EACD,AAAA,eAAe,CAAA;IACX,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,cAAc;GACzB;;;AAEL,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAC/B,AAAA,KAAK,CAAA;IACD,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,0BAA0B;IACtC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAgB;IAC1C,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,iBAAiB;GAC/B;;;AAEL,MAAM,EAAE,SAAS,EAAE,KAAK;EACpB,AAAA,KAAK,AAAA,MAAM,CAAA;IACP,UAAU,EAAE,sBAAqB;IACjC,MAAM,EAAE,OAAO;GAClB",
"sources": [
"main.scss"
],
"names": [],
"file": "main.css"
}
{"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"}

1
Standard UI Components/css/main.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

577
Standard UI Components/css/main.scss
View File

@ -1,32 +1,312 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
box-sizing: border-box;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
html{
:root{
font-size: clamp(1rem, 1.2vmax, 3rem);
}
html, body{
height: 100%;
scroll-behavior: smooth;
}
body{
--accent-color: rgb(9, 155, 82);
--light-accent-shade: rgb(223, 255, 239);
--text: 17, 17, 17;
--foreground: 255, 255, 255;
--font-family: 'Roboto', sans-serif;
body {
--accent-color: #4d2588;
--light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17;
--text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--error-color: red;
--green: #00843b;
color: rgba(var(--text-color), 1);
background: var(--background-color);
}
body[data-theme='dark']{
--accent-color: #976dd6;
--green: #13ff5a;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--error-color: rgb(255, 106, 106);
}
.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;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
p {
font-size: 0.8;
max-width: 75ch;
line-height: 1.7;
color: rgba(var(--text-color), 0.8);
&:not(:last-of-type){
margin-bottom: 1rem;
}
}
img{
object-fit: cover;
}
a{
color: inherit;
text-decoration: none;
&:focus-visible{
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
}
}
button{
display: inline-flex;
border: none;
background-color: inherit;
}
a:any-link:focus-visible{
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
sm-button{
--border-radius: 0.3rem;
}
ul{
list-style: none;
}
.flex{
display: flex;
}
.grid{
display: grid;
}
.hide{
opacity: 0;
pointer-events: none;
}
.hide-completely{
display: none;
display: none !important;
}
h1,h2,h3,h4.h5{
font-family: 'Poppins', sans-serif;
.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;
}
.flex{
display: flex;
}
.grid{
display: grid;
}
.grid-3{
grid-template-columns: 1fr auto auto;
}
.flow-column{
grid-auto-flow: column;
}
.gap-0-5{
gap: 0.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;
}
a:any-link{
text-decoration: none;
color: var(--accent-color)
.ripple{
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(var(--text-color), 0.16);
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;
}
}
.theme-switcher{
position: relative;
justify-self: flex-end;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
.icon{
position: absolute;
transition: transform 0.6s;
}
}
.theme-switcher__checkbox{
display: none;
&:checked ~ .moon-icon{
transform: scale(0) rotate(90deg);
}
&:not(:checked) ~ .sun-icon{
transform: scale(0) rotate(-90deg);
}
}
//Syntax highlighting
pre .str, code .str { color: #65B042; } /* string - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #4395ff; } /* type - light blue */
pre .lit, code .lit { color: #1a76c2; } /* literal */
pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */
pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */
pre .tag, code .tag { color: #22863a; } /* html/xml tag */
pre .atn, code .atn { color: #005cc5; } /* html/xml attribute name */
pre .atv, code .atv { color: var(--accent-color); } /* html/xml attribute value*/
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre{
max-width: 100%;
margin: 1rem 0;
padding: 0 1.5rem;
overflow-x: auto;
font-size: 0.9rem;
white-space: pre-line;
border-radius: 0.5rem;
background: rgba(var(--text-color), .04);
}
code{
font-family: 'Roboto Mono', monospace;
border-radius: 0.2rem;
font-weight: 400;
padding: 0.2rem 0.4rem;
background: rgba(var(--text-color), .04);
}
code > *{
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;
@ -35,85 +315,82 @@ h2{
margin-top: 1rem;
}
}
h1.headline{
color: rgba(var(--text), 1);
main{
display: grid;
height: 100%;
}
section{
height: 100vh;
#main_header{
padding: 0.5rem 1.5rem;
border-bottom: 1px solid rgba(var(--text-color), .1);
}
#side_nav_button{
padding: 0.5rem;
margin-left: -0.5rem;
}
#backdrop{
position: fixed;
z-index: 4;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0, 0.5);
}
#side_nav,
.right{
max-height: 100%;
overflow-y: auto;
padding-bottom: 3rem;
}
#side_nav{
h4{
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 1rem 1.5rem;
}
}
.right{
padding: 1.5rem;
h1{
margin-bottom: 1.5rem;
}
}
.list{
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: cover;
text-align: center;
color: rgba(var(--text), 1);
padding: 2rem;
border-bottom: 1px solid rgba(var(--text), .2);
h1{
font-weight: 600;
font-size: 2.5rem;
line-height: 1.2em;
z-index: 1;
text-transform: uppercase;
letter-spacing: 0.2rem;
}
h4{
z-index: 1;
font-weight: 400;
margin-top: 1.2rem;
}
.background-box{
display: flex;
align-self: center;
position: absolute;
border: solid 1px rgba(var(--text), 0.3);
width: 60vw;
height: 40%;
transform: skewX(-10deg);
background: rgba(var(--foreground), 1);
z-index: -1;
}
a{
margin-top: 2rem;
font-weight: 500;
}
sm-button{
margin-top: 4rem;
}
sm-button:first-of-type{
margin-right: 1rem;
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);
}
}
pre{
display: inline-flex;
max-width: 100%;
.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);
}
code{
display: inline-flex;
color: #311B92;
background: rgba(var(--text), .1);
padding: 0.2rem 0.4rem;
border-radius: 0.2rem;
margin: 0.2rem 0;
sm-carousel{
margin-bottom: 1rem;
}
code.extend{
padding: 0 1.5rem;
line-height: 1.6;
margin: 1rem 0;
overflow-x: auto;
max-width: 100%;
sm-tab-header{
margin-bottom: 1.5rem;
}
main{
height: 100vh;
.page{
display: flex;
flex-direction: column;
}
p{
margin: 1rem 0 1.5rem 0;
line-height: 1.6em;
color: rgba(var(--text), .8);
font-size: 1rem;
&::first-letter{
text-transform: capitalize;
}
.page__title{
}
ol{
padding: 0.6rem 1rem;
@ -127,70 +404,88 @@ ol{
}
}
}
.left{
max-height: 100%;
overflow-y: auto;
h3{
padding: 1.5rem;
}
#total_components_count{
font-size: 4rem;
}
.right{
padding: 1.5rem;
h1{
margin-bottom: 1.5rem;
}
#components_selection_list{
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
padding: 1.5rem 0 3rem 0;
}
.list{
list-style: none;
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
.item{
padding: 0.6rem 1.5rem;
text-transform: capitalize;
}
.active{
color: var(--accent-color);
background: rgba(var(--text), .06);
}
}
.card{
height: 24rem;
margin-right: 1rem;
border-radius: 0.4rem;
width: 100%;
object-fit: cover;
}
sm-carousel{
margin-bottom: 1rem;
}
@media screen and (min-width: 640px){
main{
display: grid;
grid-template-columns: 14rem minmax(0, 1fr);
gap: 1.5rem;
}
p{
max-width: 46vw;
}
.background-box{
width: 24rem !important;
height: 50% !important;
}
.comp-checkbox__title{
margin-left: 0.5rem;
}
@media screen and (max-width: 640px){
.left{
main{
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
}
#side_nav{
display: flex;
flex-direction: column;
position: fixed;
z-index: 2;
background: rgba(var(--foreground), 1);
z-index: 5;
height: 100%;
width: calc(100% - 4rem);
transition: transform 0.3s;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
height: 100vh;
transform: translateX(-100%);
&:not(.reveal){
transform: translateX(-100%);
}
}
.reveal{
transform: none;
}
}
@media screen and (min-width: 640px){
#main_header{
padding: 1rem 1.5rem;
grid-area: main-header;
}
#side_nav_button{
display: none;
}
main{
grid-template-columns: 14rem minmax(0, 1fr);
grid-template-areas: 'main-header main-header' '. .';
}
.right{
display: grid;
grid-template-columns: 1fr 90% 1fr;
& > * {
grid-column: 2/3;
}
}
#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){
.item:hover{
background: rgba(var(--text), .1);
::-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;
}
}

157
Standard UI Components/dist/button.js vendored Normal file
View File

@ -0,0 +1,157 @@
const smButton = document.createElement('template')
smButton.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
--padding: 0.6rem 1.2rem;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.1);
}
:host([disabled]) .button{
cursor: not-allowed;
opacity: 0.6;
background: rgba(var(--text-color), 0.3) !important;
color: rgba(var(--foreground-color), 0.6);
}
:host([disabled][variant="primary"]) .button{
color: rgba(var(--text-color), 1);
}
:host([variant='primary']) .button{
background: var(--accent-color);
color: rgba(var(--foreground-color), 1);
}
:host([variant='outlined']) .button{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
background: transparent;
color: var(--accent-color);
}
:host([variant='no-outline']) .button{
background: rgba(var(--foreground-color), 1);
color: var(--accent-color);
}
:host(.small) .button{
padding: 0.4rem 0.8rem;
}
:host(.round) .button{
border-radius: 10rem;
}
.button {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
padding: var(--padding);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: var(--border-radius);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
-o-transition: box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
background: var(--background);
-webkit-tap-highlight-color: transparent;
outline: none;
overflow: hidden;
border: none;
color: inherit;
align-items: center;
}
:host(:not([disabled])) .button:focus-visible{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
box-shadow: 0 0 0 0.1rem var(--accent-color);
}
:host([variant='outlined']) .button:focus-visible{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
}
@media (hover: hover){
:host(:not([disabled])) .button:hover{
-webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
}
:host([variant='outlined']) .button:hover{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
}
}
@media (hover: none){
:host(:not([disabled])) .button:active{
-webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
}
:host([variant='outlined']) .button:active{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
}
</style>
<button part="button" class="button">
<slot></slot>
</button>`;
customElements.define('sm-button',
class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smButton.content.cloneNode(true))
}
get disabled() {
return this.isDisabled
}
set disabled(value) {
if (value && !this.isDisabled) {
this.isDisabled = true
this.setAttribute('disabled', '')
this.button.removeAttribute('tabindex')
} else if (!value && this.isDisabled) {
this.isDisabled = false
this.removeAttribute('disabled')
}
}
dispatch() {
if (this.isDisabled) {
this.dispatchEvent(new CustomEvent('disabled', {
bubbles: true,
composed: true
}))
} else {
this.dispatchEvent(new CustomEvent('clicked', {
bubbles: true,
composed: true
}))
}
}
connectedCallback() {
this.isDisabled = false
this.button = this.shadowRoot.querySelector('.button')
if (this.hasAttribute('disabled') && !this.isDisabled)
this.isDisabled = true
this.addEventListener('click', (e) => {
this.dispatch()
})
}
})

1
Standard UI Components/dist/button.min.js vendored Normal file
View File

@ -0,0 +1 @@
const smButton=document.createElement("template");smButton.innerHTML="\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.1);\n}\n:host([disabled]) .button{\n cursor: not-allowed;\n opacity: 0.6;\n background: rgba(var(--text-color), 0.3) !important;\n color: rgba(var(--foreground-color), 0.6);\n}\n:host([disabled][variant=\"primary\"]) .button{\n color: rgba(var(--text-color), 1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color);\n color: rgba(var(--foreground-color), 1);\n}\n:host([variant='outlined']) .button{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n background: transparent; \n color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n background: rgba(var(--foreground-color), 1); \n color: var(--accent-color);\n}\n:host(.small) .button{\n padding: 0.4rem 0.8rem;\n}\n:host(.round) .button{\n border-radius: 10rem;\n}\n.button {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: var(--border-radius); \n -webkit-box-pack: center; \n -ms-flex-pack: center; \n justify-content: center;\n -webkit-transition: -webkit-box-shadow 0.3s;\n transition: -webkit-box-shadow 0.3s;\n -o-transition: box-shadow 0.3s;\n transition: box-shadow 0.3s;\n transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host(:not([disabled])) .button:focus-visible{\n -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n box-shadow: 0 0 0 0.1rem var(--accent-color);\n}\n:host([variant='outlined']) .button:focus-visible{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']) .button:hover{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n}\n</style>\n<button part=\"button\" class=\"button\">\n <slot></slot> \n</button>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}get disabled(){return this.isDisabled}set disabled(n){n&&!this.isDisabled?(this.isDisabled=!0,this.setAttribute("disabled",""),this.button.removeAttribute("tabindex")):!n&&this.isDisabled&&(this.isDisabled=!1,this.removeAttribute("disabled"))}dispatch(){this.isDisabled?this.dispatchEvent(new CustomEvent("disabled",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("clicked",{bubbles:!0,composed:!0}))}connectedCallback(){this.isDisabled=!1,this.button=this.shadowRoot.querySelector(".button"),this.hasAttribute("disabled")&&!this.isDisabled&&(this.isDisabled=!0),this.addEventListener("click",n=>{this.dispatch()})}});

400
Standard UI Components/dist/carousel.js vendored Normal file
View File

@ -0,0 +1,400 @@
const smCarousel = document.createElement('template')
smCarousel.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
--arrow-left: 1rem;
--arrow-right: 1rem;
--arrow-top: auto;
--arrow-bottom: auto;
--arrow-fill: rgba(var(--foreground-color), 1);
--arrow-background: rgba(var(--text-color), 1);
--arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
--indicator-top: auto;
--indicator-bottom: -1rem;
--active-indicator-color: var(--accent-color);
}
.carousel__button{
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
min-width: 0;
top: var(--arrow-top);
bottom: var(--arrow-bottom);
border: none;
background: var(--arrow-background);
-webkit-box-shadow: var(--arrow-box-shadow);
box-shadow: var(--arrow-box-shadow);
-webkit-tap-highlight-color: transparent;
transition: transform 0.3s;
z-index: 1;
border-radius: 3rem;
padding: 0.5rem;
}
button:focus{
outline: none;
}
button:focus-visible{
outline: rgba(var(--text-color), 1) 0.1rem solid;
}
.carousel__button:active{
transform: scale(0.9);
}
.carousel__button--left{
left: var(--arrow-left);
}
.carousel__button--right{
right: var(--arrow-right);
}
.icon {
height: 1.5rem;
width: 1.5rem;
fill: var(--arrow-fill);
}
.hide{
display: none !important;
}
.carousel-container{
position: relative;
display: grid;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.carousel{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
width: 100%;
overflow: auto hidden;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.indicators{
display: -ms-grid;
display: grid;
grid-auto-flow: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: var(--indicator-top);
bottom: var(--indicator-bottom);
gap: 0.5rem;
width: 100%;
}
.dot{
position: relative;
padding: 0.2rem;
background: rgba(var(--text-color), 0.3);
border-radius: 1rem;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
cursor: pointer;
}
.dot.active{
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
background: var(--active-indicator-color);
}
slot::slotted(*){
scroll-snap-align: center;
}
:host([align-items="start"]) slot::slotted(*){
scroll-snap-align: start;
}
:host([align-items="center"]) slot::slotted(*){
scroll-snap-align: center;
}
:host([align-items="end"]) slot::slotted(*){
scroll-snap-align: end;
}
@media (hover: hover){
.carousel{
overflow: hidden;
}
.left,.right{
display: none;
}
}
@media (hover: none){
::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background-color: transparent !important;
}
::-webkit-scrollbar {
height: 0;
background-color: transparent;
}
.carousel{
overflow: auto none;
}
.carousel__button{
display: none;
}
.left,.right{
display: block;
}
}
</style>
<div class="carousel-container">
<button class="carousel__button carousel__button--left hide">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
</button>
<div part="carousel" class="carousel">
<slot></slot>
</div>
<button class="carousel__button carousel__button--right hide">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
</button>
<div class="indicators"></div>
</div>
`;
customElements.define('sm-carousel', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smCarousel.content.cloneNode(true))
this.isAutoPlaying = false
this.autoPlayInterval = 5000
this.autoPlayTimeout
this.initialTimeout
this.activeSlideNum = 0
this.carouselItems
this.indicators
this.showIndicator = false
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(slideNum) {
this.carousel.scrollTo({
left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
behavior: 'smooth'
})
}
nextSlide() {
if (!this.carouselItems) return
let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
this.showSlide(showSlideNo)
}
autoPlay() {
this.nextSlide()
if (this.isAutoPlaying) {
this.autoPlayTimeout = setTimeout(() => {
this.autoPlay()
}, this.autoPlayInterval);
}
}
startAutoPlay() {
this.setAttribute('autoplay', '')
}
stopAutoPlay() {
this.removeAttribute('autoplay')
}
createIndicator(index) {
let dot = document.createElement('div')
dot.classList.add('dot')
dot.dataset.rank = index
return dot
}
handleIndicatorClick(e) {
if (e.target.closest('.dot')) {
const slideNum = parseInt(e.target.closest('.dot').dataset.rank)
if (this.activeSlideNum !== slideNum) {
this.showSlide(slideNum)
}
}
}
handleKeyDown(e) {
if (e.code === 'ArrowLeft')
this.scrollRight()
else if (e.code === 'ArrowRight')
this.scrollRight()
}
connectedCallback() {
let frag = document.createDocumentFragment();
this.carouselSlot.addEventListener('slotchange', e => {
this.carouselItems = this.carouselSlot.assignedElements()
this.carouselItems.forEach(item => allElementsObserver.observe(item))
if (this.carouselItems.length > 0) {
firstOptionObserver.observe(this.carouselItems[0])
lastOptionObserver.observe(this.carouselItems[this.carouselItems.length - 1])
}
else {
navButtonLeft.classList.add('hide')
navButtonRight.classList.add('hide')
firstOptionObserver.disconnect()
lastOptionObserver.disconnect()
}
if (this.showIndicator) {
this.indicatorsContainer.innerHTML = ``
this.carouselItems.forEach((item, index) => {
frag.append(
this.createIndicator(index)
)
item.dataset.rank = index
})
this.indicatorsContainer.append(frag)
this.indicators = this.indicatorsContainer.children
}
})
const IOOoptions = {
threshold: 0.9,
root: this
}
const allElementsObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (this.showIndicator) {
const activeRank = parseInt(entry.target.dataset.rank)
if (entry.isIntersecting) {
this.indicators[activeRank].classList.add('active')
this.activeSlideNum = activeRank
}
else
this.indicators[activeRank].classList.remove('active')
}
})
}, IOOoptions)
const firstOptionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.navButtonLeft.classList.add('hide')
}
else {
this.navButtonLeft.classList.remove('hide')
}
})
},
IOOoptions
)
const lastOptionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.navButtonRight.classList.add('hide')
}
else {
this.navButtonRight.classList.remove('hide')
}
})
},
IOOoptions
)
const resObs = new ResizeObserver(entries => {
entries.forEach(entry => {
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)
this.addEventListener('keydown', this.handleKeyDown)
this.navButtonRight.addEventListener('click', this.scrollRight)
this.navButtonLeft.addEventListener('click', this.scrollLeft)
this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === 'indicator') {
this.showIndicator = this.hasAttribute('indicator')
}
if (name === 'autoplay') {
if (this.hasAttribute('autoplay')) {
this.initialTimeout = setTimeout(() => {
this.isAutoPlaying = true
this.autoPlay()
}, this.autoPlayInterval);
}
else {
this.isAutoPlaying = false
clearTimeout(this.autoPlayTimeout)
clearTimeout(this.initialTimeout)
}
}
if (name === 'interval') {
if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
}
else {
this.autoPlayInterval = 5000
}
}
}
}
disconnectedCallback() {
this.navButtonRight.removeEventListener('click', this.scrollRight)
this.navButtonLeft.removeEventListener('click', this.scrollLeft)
this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick)
}
})

1
Standard UI Components/dist/carousel.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

196
Standard UI Components/dist/checkbox.js vendored Normal file
View File

@ -0,0 +1,196 @@
const smCheckbox = document.createElement('template')
smCheckbox.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
--height: 1.4rem;
--width: 1.4rem;
--border-radius: 0.2rem;
--border-color: rgba(var(--text-color), 0.7);
}
:host([disabled]) {
opacity: 0.6;
user-select: none;
pointer-events: none;
}
.checkbox {
position: relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
height: 1.5rem;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.checkbox:focus-visible{
outline: auto;
}
.checkbox:active .icon,
.checkbox:focus-within .icon{
box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
}
input {
display: none;
}
.checkmark {
stroke-dashoffset: -65;
stroke-dasharray: 65;
-webkit-transition: stroke-dashoffset 0.3s;
-o-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
}
:host([checked]) .checkmark {
stroke-dashoffset: 0;
stroke: rgba(var(--foreground-color), 1);
}
:host([checked]) .icon {
stroke-width: 8;
stroke: var(--accent-color);
background: var(--accent-color);
}
:host(:not([checked])) .icon {
box-shadow: 0 0 0 0.2rem var(--border-color) inset;
}
.icon {
fill: none;
height: var(--height);
width: var(--width);
padding: 0.2rem;
stroke: rgba(var(--text-color), 0.7);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
border-radius: var(--border-radius);
}
</style>
<label class="checkbox">
<svg class="icon" viewBox="0 0 64 64">
<title>checkbox</title>
<path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
</svg>
<slot></slot>
</label>`
customElements.define('sm-checkbox', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smCheckbox.content.cloneNode(true))
this.checkbox = this.shadowRoot.querySelector('.checkbox');
this.reset = this.reset.bind(this)
this.dispatch = this.dispatch.bind(this)
this.handleKeyup = this.handleKeyup.bind(this)
this.handleClick = this.handleClick.bind(this)
}
static get observedAttributes() {
return ['value', 'disabled', 'checked']
}
get disabled() {
return this.hasAttribute('disabled')
}
set disabled(val) {
if (val) {
this.setAttribute('disabled', '')
} else {
this.removeAttribute('disabled')
}
}
get checked() {
return this.hasAttribute('checked')
}
set checked(value) {
if (value) {
this.setAttribute('checked', '')
}
else {
this.removeAttribute('checked')
}
}
set value(val) {
this.setAttribute('value', val)
}
get value() {
return this.getAttribute('value')
}
reset() {
this.removeAttribute('checked')
}
dispatch(){
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
composed: true
}))
}
handleKeyup(e){
if (e.code === "Space") {
this.click()
}
}
handleClick(e){
this.toggleAttribute('checked')
}
connectedCallback() {
if (!this.hasAttribute('disabled')) {
this.setAttribute('tabindex', '0')
}
this.setAttribute('role', 'checkbox')
if (!this.hasAttribute('checked')) {
this.setAttribute('aria-checked', 'false')
}
this.addEventListener('keyup', this.handleKeyup)
this.addEventListener('click', this.handleClick)
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === 'checked') {
this.setAttribute('aria-checked', this.hasAttribute('checked'))
this.dispatch()
}
else if (name === 'disabled') {
if (this.hasAttribute('disabled')) {
this.removeAttribute('tabindex')
}
else {
this.setAttribute('tabindex', '0')
}
}
}
}
disconnectedCallback() {
this.removeEventListener('keyup', this.handleKeyup)
this.removeEventListener('change', this.handleClick)
}
})

1
Standard UI Components/dist/checkbox.min.js vendored Normal file
View File

@ -0,0 +1 @@
const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n --height: 1.4rem;\n --width: 1.4rem;\n --border-radius: 0.2rem;\n --border-color: rgba(var(--text-color), 0.7);\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .checkbox {\n position: relative;\n display:-webkit-box;\n display:-ms-flexbox;\n display:flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n cursor: pointer;\n height: 1.5rem;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n \n .checkbox:focus-visible{\n outline: auto;\n }\n .checkbox:active .icon,\n .checkbox:focus-within .icon{\n box-shadow: 0 0 0 0.2rem var(--accent-color) inset;\n }\n \n input {\n display: none;\n }\n \n .checkmark {\n stroke-dashoffset: -65;\n stroke-dasharray: 65;\n -webkit-transition: stroke-dashoffset 0.3s; \n -o-transition: stroke-dashoffset 0.3s; \n transition: stroke-dashoffset 0.3s;\n }\n \n :host([checked]) .checkmark {\n stroke-dashoffset: 0;\n stroke: rgba(var(--foreground-color), 1);\n }\n :host([checked]) .icon {\n stroke-width: 8; \n stroke: var(--accent-color);\n background: var(--accent-color);\n }\n :host(:not([checked])) .icon {\n box-shadow: 0 0 0 0.2rem var(--border-color) inset;\n }\n \n .icon {\n fill: none;\n height: var(--height);\n width: var(--width);\n padding: 0.2rem;\n stroke: rgba(var(--text-color), 0.7);\n stroke-width: 6;\n overflow: visible;\n stroke-linecap: round;\n stroke-linejoin: round;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n border-radius: var(--border-radius);\n }\n</style>\n<label class="checkbox">\n <svg class="icon" viewBox="0 0 64 64">\n <title>checkbox</title>\n <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n </svg>\n <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyup(e){"Space"===e.code&&this.click()}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});

112
Standard UI Components/dist/copy.js vendored Normal file
View File

@ -0,0 +1,112 @@
const smCopy = document.createElement('template')
smCopy.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
--padding: 0;
--background-color: inherit;
--button-background-color: rgba(var(--text-color), 0.2);
--button-border-radius: 0.3rem;
}
.copy{
display: grid;
gap: 1rem;
padding: var(--padding);
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
}
.copy-button{
display: inline-flex;
justify-content: center;
cursor: pointer;
border: none;
padding: 0.4rem;
background-color: inherit;
border-radius: var(--button-border-radius);
}
.copy-button:active{
background-color: var(--button-background-color);
}
.icon{
height: 1.2rem;
width: 1.2rem;
fill: rgba(var(--text-color), 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);
}
}
</style>
</style>
<section class="copy">
<p class="copy-content"></p>
<button part="button" class="copy-button" title="copy">
<slot name="copy-icon">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>
</slot>
</button>
</section>
`;
customElements.define('sm-copy',
class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smCopy.content.cloneNode(true))
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(val) {
this.setAttribute('value', val)
}
get value() {
return this.getAttribute('value')
}
fireEvent() {
this.dispatchEvent(
new CustomEvent('copy', {
composed: true,
bubbles: true,
cancelable: true,
})
)
}
copy() {
navigator.clipboard.writeText(this.copyContent.textContent)
.then(res => this.fireEvent())
.catch(err => console.error(err))
}
connectedCallback() {
this.copyButton.addEventListener('click', this.copy)
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') {
this.copyContent.textContent = newValue
}
}
disconnectedCallback() {
this.copyButton.removeEventListener('click', this.copy)
}
})

1
Standard UI Components/dist/copy.min.js vendored Normal file
View File

@ -0,0 +1 @@
const smCopy=document.createElement("template");smCopy.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n --padding: 0;\n --background-color: inherit;\n --button-background-color: rgba(var(--text-color), 0.2);\n --button-border-radius: 0.3rem;\n}\n.copy{\n display: grid;\n gap: 1rem;\n padding: var(--padding);\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: flex-start;\n}\n.copy-button{\n display: inline-flex;\n justify-content: center;\n cursor: pointer;\n border: none;\n padding: 0.4rem;\n background-color: inherit;\n border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n background-color: var(--button-background-color);\n}\n.icon{\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n .copy:hover .copy-button{\n opacity: 1;\n }\n .copy-button{\n opacity: 0.6;\n }\n .copy-button:hover{\n background-color: var(--button-background-color);\n }\n}\n</style>\n</style>\n<section class="copy">\n <p class="copy-content"></p>\n <button part="button" class="copy-button" title="copy">\n <slot name="copy-icon">\n <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n </slot>\n </button>\n</section>\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)}});

158
Standard UI Components/dist/file-input.js vendored Normal file
View File

@ -0,0 +1,158 @@
const fileInput = document.createElement('template')
fileInput.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
:host{
--border-radius: 0.3rem;
--button-color: inherit;
--button-font-weight: 500;
--button-background-color: var(--accent-color);
}
.file-input {
display: flex;
}
.file-picker {
display: flex;
cursor: pointer;
user-select: none;
align-items: center;
padding: 0.5rem 0.8rem;
color: var(--button-color);
border-radius: var(--border-radius);
font-weight: var(--button-font-weigh);
background-color: var(--button-background-color);
}
.files-preview-wrapper{
display: grid;
gap: 0.5rem;
list-style: none;
}
.files-preview-wrapper:not(:empty){
margin-bottom: 1rem;
}
.file-preview{
display: grid;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 0.8rem;
border-radius: var(--border-radius);
background-color: rgba(var(--text-color), 0.06)
}
.file-name{
}
.file-size{
font-size: 0.8rem;
font-weight: 400;
color: rgba(var(--text-color), 0.8);
}
input[type=file] {
display: none;
}
</style>
<ul class="files-preview-wrapper"></ul>
<label tabindex="0" class="file-input">
<div class="file-picker"><slot>Choose file</slot></div>
<input type="file">
</label>
`
customElements.define('file-input', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(fileInput.content.cloneNode(true))
this.input = this.shadowRoot.querySelector('input')
this.fileInput = this.shadowRoot.querySelector('.file-input')
this.filesPreviewWraper = this.shadowRoot.querySelector('.files-preview-wrapper')
this.observeList = ['accept', 'multiple', 'capture']
this.reset = this.reset.bind(this)
this.formatBytes = this.formatBytes.bind(this)
this.createFilePreview = this.createFilePreview.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
}
static get observedAttributes() {
return ['accept', 'multiple', 'capture']
}
get files() {
return this.input.files
}
set accept(val) {
this.setAttribute('accept', val)
}
set multiple(val) {
if (val) {
this.setAttribute('mutiple', '')
}
else {
this.removeAttribute('mutiple')
}
}
set capture(val) {
this.setAttribute('capture', val)
}
set value(val) {
this.input.value = val
}
get isValid() {
return this.input.value !== ''
}
reset(){
this.input.value = ''
this.filesPreviewWraper.innerHTML = ''
}
formatBytes(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
createFilePreview(file){
const filePreview = document.createElement('li')
const {name, size} = file
filePreview.className = 'file-preview'
filePreview.innerHTML = `
<div class="file-name">${name}</div>
<h5 class="file-size">${this.formatBytes(size)}</h5>
`
return filePreview
}
handleChange(e){
this.filesPreviewWraper.innerHTML = ''
const frag = document.createDocumentFragment()
Array.from(e.target.files).forEach(file => {
frag.append(
this.createFilePreview(file)
)
});
this.filesPreviewWraper.append(frag)
}
handleKeyDown(e){
if (e.key === 'Enter' || e.code === 'Space') {
e.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(name) {
if (this.observeList.includes(name)){
if (this.hasAttribute(name)) {
this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
}
else {
this.input.removeAttribute(name)
}
}
}
disconnectedCallback() {
this.input.removeEventListener('change', this.handleChange)
this.fileInput.removeEventListener('keydown', this.handleKeyDown)
}
})

1
Standard UI Components/dist/file-input.min.js vendored Normal file
View File

@ -0,0 +1 @@
const fileInput=document.createElement("template");fileInput.innerHTML='\n \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: inherit;\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker {\n display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weigh);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n gap: 0.5rem;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n .file-size{\n font-size: 0.8rem;\n font-weight: 400;\n color: rgba(var(--text-color), 0.8);\n }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.observeList=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.observeList.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)}});

93
Standard UI Components/dist/form.js vendored Normal file
View File

@ -0,0 +1,93 @@
const smForm = document.createElement('template')
smForm.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
:host{
--gap: 1rem;
width: 100%;
}
form{
display: grid;
gap: var(--gap);
width: 100%;
}
</style>
<form onsubmit="return false">
<slot></slot>
</form>
`
customElements.define('sm-form', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smForm.content.cloneNode(true))
this.form = this.shadowRoot.querySelector('form')
this.formElements
this.requiredElements
this.submitButton
this.resetButton
this.allRequiredValid = false
this.debounce = this.debounce.bind(this)
this.handleInput = this.handleInput.bind(this)
this.handleKeydown = this.handleKeydown.bind(this)
this.reset = this.reset.bind(this)
}
debounce(callback, wait){
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
handleInput(e) {
this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
if (!this.submitButton) return;
if (this.allRequiredValid) {
this.submitButton.disabled = false;
}
else {
this.submitButton.disabled = true;
}
}
handleKeydown(e) {
if (e.key === 'Enter') {
if (this.allRequiredValid) {
this.submitButton.click()
}
else {
// implement show validity logic
}
}
}
reset(){
this.formElements.forEach(elem => elem.reset())
}
connectedCallback() {
const slot = this.shadowRoot.querySelector('slot')
slot.addEventListener('slotchange', e => {
this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'))
this.submitButton = e.target.assignedElements().find(elem => elem.getAttribute('variant') === 'primary' || elem.getAttribute('type') === 'submit');
this.resetButton = e.target.assignedElements().find(elem => elem.getAttribute('type') === 'reset');
if (this.resetButton) {
this.resetButton.addEventListener('click', this.reset)
}
})
this.addEventListener('input', this.debounce(this.handleInput, 100))
this.addEventListener('keydown', this.debounce(this.handleKeydown, 100))
}
disconnectedCallback() {
this.removeEventListener('input', this.debounce(this.handleInput, 100))
this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100))
}
})

1
Standard UI Components/dist/form.min.js vendored Normal file
View File

@ -0,0 +1 @@
const smForm=document.createElement("template");smForm.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n --gap: 1rem;\n width: 100%;\n }\n form{\n display: grid;\n gap: var(--gap);\n width: 100%;\n }\n </style>\n\t<form onsubmit="return false">\n\t\t<slot></slot>\n\t</form>\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.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this)}debounce(t,e){let n=null;return(...s)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,s)},e)}}handleInput(t){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&&this.allRequiredValid&&this.submitButton.click()}reset(){this.formElements.forEach(t=>t.reset())}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{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=t.target.assignedElements().find(t=>"primary"===t.getAttribute("variant")||"submit"===t.getAttribute("type")),this.resetButton=t.target.assignedElements().find(t=>"reset"===t.getAttribute("type")),this.resetButton&&this.resetButton.addEventListener("click",this.reset)}),this.addEventListener("input",this.debounce(this.handleInput,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this.handleInput,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}});

419
Standard UI Components/dist/input.js vendored Normal file
View File

@ -0,0 +1,419 @@
const smInput = document.createElement('template')
smInput.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input::-ms-reveal,
input::-ms-clear {
display: none;
}
input:invalid{
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
::-moz-focus-inner{
border: none;
}
:host{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
--width: 100%;
--font-size: 1rem;
--icon-gap: 0.5rem;
--border-radius: 0.3rem;
--padding: 0.7rem 1rem;
--background: rgba(var(--text-color), 0.06);
}
.hide{
opacity: 0 !important;
pointer-events: none !important;
}
.hide-completely{
display: none;
}
.icon {
fill: rgba(var(--text-color), 0.6);
height: 1.4rem;
width: 1.4rem;
border-radius: 1rem;
cursor: pointer;
min-width: 0;
}
:host(.round) .input{
border-radius: 10rem;
}
.input {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: text;
min-width: 0;
text-align: left;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
gap: var(--icon-gap);
padding: var(--padding);
border-radius: var(--border-radius);
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
background: var(--background);
width: 100%;
outline: none;
}
.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) inset !important;
}
.disabled{
pointer-events: none;
opacity: 0.6;
}
.label {
opacity: .7;
font-weight: 400;
font-size: var(--font-size);
position: absolute;
top: 0;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 100%;
user-select: none;
will-change: transform;
}
.outer-container{
position: relative;
width: var(--width);
}
.container{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
input{
font-size: var(--font-size);
border: none;
background: transparent;
outline: none;
color: rgba(var(--text-color), 1);
width: 100%;
}
:host(:not(.outlined)) .animate-label .container input {
-webkit-transform: translateY(0.6rem);
-ms-transform: translateY(0.6rem);
transform: translateY(0.6rem);
}
:host(:not(.outlined)) .animate-label .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)
}
:host(.outlined) .input {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--foreground-color), 1);
}
:host(.outlined) .label {
width: max-content;
margin-left: -0.5rem;
padding: 0 0.5rem;
}
:host(.outlined) .animate-label .label {
-webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
-ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
transform: translate(0.1rem, -1.5rem) scale(0.8);
opacity: 1;
background: rgba(var(--foreground-color), 1);
}
.animate-label:focus-within:not(.readonly) .label{
color: var(--accent-color)
}
.feedback-text{
font-size: 0.9rem;
width: 100%;
color: var(--error-color);
padding: 0.6rem 1rem;
text-align: left;
}
.feedback-text:empty{
padding: 0;
}
@media (any-hover: hover){
.icon:hover{
background: rgba(var(--text-color), 0.1);
}
}
</style>
<div class="outer-container">
<label part="input" class="input">
<slot name="icon"></slot>
<div class="container">
<input/>
<div part="placeholder" class="label"></div>
</div>
<svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
</label>
<div class="feedback-text"></div>
</div>
`;
customElements.define('sm-input',
class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smInput.content.cloneNode(true))
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.validationFunction
this.observeList = ['type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
this.reset = this.reset.bind(this)
this.setValidity = this.setValidity.bind(this)
this.showValidity = this.showValidity.bind(this)
this.hideValidity = this.hideValidity.bind(this)
this.focusIn = this.focusIn.bind(this)
this.focusOut = this.focusOut.bind(this)
this.fireEvent = this.fireEvent.bind(this)
this.debounce = this.debounce.bind(this)
this.checkInput = this.checkInput.bind(this)
}
static get observedAttributes() {
return ['placeholder', 'type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
}
get value() {
return this.input.value
}
set value(val) {
this.input.value = val;
this.checkInput()
this.fireEvent()
}
get placeholder() {
return this.getAttribute('placeholder')
}
set placeholder(val) {
this.setAttribute('placeholder', val)
}
get type() {
return this.getAttribute('type')
}
set type(val) {
this.setAttribute('type', val)
}
get isValid() {
if (this.customValidation) {
return this.validationFunction(this.input.value)
}
else {
return this.input.checkValidity()
}
}
get validity() {
return this.input.validity
}
set disabled(value) {
if (value)
this.inputParent.classList.add('disabled')
else
this.inputParent.classList.remove('disabled')
}
set readOnly(value) {
if (value) {
this.setAttribute('readonly', '')
} else {
this.removeAttribute('readonly')
}
}
set customValidation(val) {
this.validationFunction = val
}
reset(){
this.value = ''
}
setValidity(message){
this.feedbackText.textContent = message
}
showValidity(){
this.feedbackText.classList.remove('hide-completely')
}
hideValidity(){
this.feedbackText.classList.add('hide-completely')
}
focusIn(){
this.input.focus()
}
focusOut(){
this.input.blur()
}
fireEvent(){
let event = new Event('input', {
bubbles: true,
cancelable: true,
composed: true
});
this.dispatchEvent(event);
}
debounce(callback, wait){
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
checkInput(e){
if (!this.hasAttribute('readonly')) {
if (this.input.value !== '') {
this.clearBtn.classList.remove('hide')
} else {
this.clearBtn.classList.add('hide')
}
}
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
if (this.input.value !== '') {
if (this.animate)
this.inputParent.classList.add('animate-label')
else
this.label.classList.add('hide')
} else {
if (this.animate)
this.inputParent.classList.remove('animate-label')
else
this.label.classList.remove('hide')
}
}
connectedCallback() {
this.animate = this.hasAttribute('animate')
if (this.hasAttribute('value')) {
this.input.value = this.getAttribute('value')
this.checkInput()
}
if (this.hasAttribute('error-text')) {
this.feedbackText.textContent = this.getAttribute('error-text')
}
if (!this.hasAttribute('type')) {
this.setAttribute('type', 'text')
}
this.input.addEventListener('input', this.checkInput)
this.clearBtn.addEventListener('click', this.reset)
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (this.observeList.includes(name)) {
if (this.hasAttribute(name)) {
this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
}
else {
this.input.removeAttribute(name)
}
}
if (name === 'placeholder') {
this.label.textContent = newValue;
this.setAttribute('aria-label', newValue);
}
else if (name === 'type') {
if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
this.input.setAttribute('inputmode', 'numeric')
}
}
else if (name === 'readonly') {
if (this.hasAttribute('readonly')) {
this.inputParent.classList.add('readonly')
} else {
this.inputParent.classList.remove('readonly')
}
}
else if (name === 'disabled') {
if (this.hasAttribute('disabled')) {
this.inputParent.classList.add('disabled')
}
else {
this.inputParent.classList.remove('disabled')
}
}
}
}
disconnectedCallback() {
this.input.removeEventListener('input', this.checkInput)
this.clearBtn.removeEventListener('click', this.reset)
}
})

1
Standard UI Components/dist/input.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

291
Standard UI Components/dist/menu.js vendored Normal file
View File

@ -0,0 +1,291 @@
const smMenu = document.createElement('template')
smMenu.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.menu{
display: -ms-grid;
display: grid;
place-items: center;
position: relative;
height: 2rem;
width: 2rem;
outline: none;
}
.icon {
position: absolute;
fill: rgba(var(--text-color), 0.7);
height: 2.4rem;
width: 2.4rem;
padding: 0.7rem;
stroke: rgba(var(--text-color), 0.7);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
border-radius: 2rem;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.hide{
opacity: 0;
pointer-events: none;
user-select: none;
}
.select{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
cursor: pointer;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.menu:focus .icon,
.focused{
background: rgba(var(--text-color), 0.1);
}
:host([align-options="left"]) .options{
left: 0;
}
:host([align-options="right"]) .options{
right: 0;
}
.options{
padding: 0.5rem 0;
overflow: hidden auto;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
-webkit-transform: translateY(-1rem);
-ms-transform: translateY(-1rem);
transform: translateY(-1rem);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: rgba(var(--foreground-color), 1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
border: solid 1px rgba(var(--text-color), 0.2);
border-radius: 0.3rem;
z-index: 2;
-webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
top: 100%;
bottom: auto;
}
.moveUp{
top: auto;
bottom: 100%;
-webkit-transform: translateY(3rem);
-ms-transform: translateY(3rem);
transform: translateY(3rem);
}
.moveLeft{
left: auto;
right: 0;
}
.no-transformations{
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
@media (hover: hover){
.menu:hover .icon{
background: rgba(var(--text-color), 0.1);
}
}
</style>
<div class="select">
<div class="menu" tabindex="0">
<svg class="icon" viewBox="0 0 64 64">
<title>options</title>
<circle cx="32" cy="6" r="5.5"/>
<circle cx="32" cy="58" r="5.5"/>
<circle cx="32" cy="31.89" r="5.5"/>
</svg>
</div>
<div class="options hide">
<slot></slot>
</div>
</div>`;
customElements.define('sm-menu', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smMenu.content.cloneNode(true))
this.expand = this.expand.bind(this)
}
static get observedAttributes() {
return ['value']
}
get value() {
return this.getAttribute('value')
}
set value(val) {
this.setAttribute('value', val)
}
expand(){
if (!this.open) {
this.optionList.classList.remove('hide')
this.optionList.classList.add('no-transformations')
this.open = true
this.icon.classList.add('focused')
this.availableOptions.forEach(option => {
option.setAttribute('tabindex', '0')
})
}
}
collapse() {
if (this.open) {
this.open = false
this.icon.classList.remove('focused')
this.optionList.classList.add('hide')
this.optionList.classList.remove('no-transformations')
this.availableOptions.forEach(option => {
option.removeAttribute('tabindex')
})
}
}
connectedCallback() {
this.availableOptions
this.containerDimensions
this.optionList = this.shadowRoot.querySelector('.options')
let slot = this.shadowRoot.querySelector('.options slot'),
menu = this.shadowRoot.querySelector('.menu')
this.icon = this.shadowRoot.querySelector('.icon')
this.open = false;
menu.addEventListener('click', e => {
if (!this.open) {
this.expand()
} else {
this.collapse()
}
})
menu.addEventListener('keydown', e => {
if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
e.preventDefault()
this.availableOptions[0].focus()
}
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault()
if (!this.open) {
this.expand()
} else {
this.collapse()
}
}
})
this.optionList.addEventListener('keydown', e => {
if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
e.preventDefault()
if (document.activeElement.previousElementSibling) {
document.activeElement.previousElementSibling.focus()
}
}
if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
e.preventDefault()
if (document.activeElement.nextElementSibling)
document.activeElement.nextElementSibling.focus()
}
})
this.optionList.addEventListener('click', e => {
this.collapse()
})
slot.addEventListener('slotchange', e => {
this.availableOptions = slot.assignedElements()
this.containerDimensions = this.optionList.getBoundingClientRect()
});
window.addEventListener('mousedown', e => {
if (!this.contains(e.target) && e.button !== 2) {
this.collapse()
}
})
}
})
// option
const smMenuOption = document.createElement('template')
smMenuOption.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.option{
opacity: 0.9;
min-width: 100%;
padding: 0.6rem 2rem;
cursor: pointer;
overflow-wrap: break-word;
white-space: nowrap;
outline: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
user-select: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
:host(:focus){
outline: none;
background: rgba(var(--text-color), 0.1);
}
@media (hover: hover){
.option:hover{
opacity: 1;
background: rgba(var(--text-color), 0.1);
}
}
</style>
<div class="option">
<slot></slot>
</div>`;
customElements.define('sm-menu-option', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smMenuOption.content.cloneNode(true))
}
connectedCallback() {
this.addEventListener('keyup', e => {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault()
this.click()
}
})
}
})

1
Standard UI Components/dist/menu.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

224
Standard UI Components/dist/notifications.js vendored Normal file
View File

@ -0,0 +1,224 @@
const smNotifications = document.createElement('template')
smNotifications.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.hide{
opacity: 0 !important;
pointer-events: none !important;
}
.notification-panel{
display: grid;
width: 100%;
gap: 0.5rem;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
max-height: 100%;
padding: 1.5rem;
overflow: hidden auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
.notification-panel:empty{
display:none;
}
.notification{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 0.3rem;
-webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
background: rgba(var(--foreground-color), 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;
}
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), 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%;
align-self: center;
}
.notification:last-of-type{
margin-bottom: 0;
}
.icon {
height: 100%;
width: 100%;
fill: rgba(var(--text-color), 0.7);
}
.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;
}
.close:active{
transform: scale(0.9);
}
@media screen and (min-width: 640px){
.notification-panel{
max-width: 28rem;
width: max-content;
}
.notification{
width: auto;
border: solid 1px rgba(var(--text-color), 0.2);
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-thumb{
background: rgba(var(--text-color), 0.3);
border-radius: 1rem;
&:hover{
background: rgba(var(--text-color), 0.5);
}
}
.close:hover{
background-color: rgba(var(--text-color), 0.1);
}
}
</style>
<div class="notification-panel"></div>
`
customElements.define('sm-notifications', class extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({
mode: 'open'
}).append(smNotifications.content.cloneNode(true))
this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
this.animationOptions = {
duration: 300,
fill: "forwards",
easing: "ease"
}
this.push = this.push.bind(this)
this.removeNotification = this.removeNotification.bind(this)
this.clearAll = this.clearAll.bind(this)
}
push(messageBody, options = {}) {
const {pinned} = options
let notification = document.createElement('div'),
composition = ``
notification.classList.add('notification')
if (pinned)
notification.classList.add('pinned')
composition += `
<p>${messageBody}</p>
<button class="close">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>`
notification.innerHTML = composition
this.notificationPanel.append(notification)
notification.animate([
{
transform: `translateY(1rem)`,
opacity: '0'
},
{
transform: `none`,
opacity: '1'
},
], this.animationOptions)
}
removeNotification(notification){
notification.animate([
{
transform: `none`,
opacity: '1'
},
{
transform: `translateY(1rem)`,
opacity: '0'
}
], this.animationOptions).onfinish = () => {
notification.remove()
}
}
clearAll(){
Array.from(this.notificationPanel.children).forEach(child => {
this.removeNotification(child)
})
}
connectedCallback() {
this.notificationPanel.addEventListener('click', e => {
if (e.target.closest('.close'))(
this.removeNotification(e.target.closest('.notification'))
)
})
const observer = new MutationObserver(mutationList => {
mutationList.forEach(mutation => {
if (mutation.type === 'childList') {
if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned'))
setTimeout(() => {
this.removeNotification(mutation.addedNodes[0])
}, 5000);
}
})
})
observer.observe(this.notificationPanel, {
childList: true,
})
}
})

1
Standard UI Components/dist/notifications.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

360
Standard UI Components/dist/popup.js vendored Normal file
View File

@ -0,0 +1,360 @@
const smPopup = document.createElement('template')
smPopup.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
position: fixed;
display: -ms-grid;
display: grid;
z-index: 10;
--width: 100%;
--height: auto;
--min-width: auto;
--min-height: auto;
--body-padding: 1.5rem;
--backdrop: rgba(0, 0, 0, 0.6);
--border-radius: 0.8rem 0.8rem 0 0;
}
.popup-container{
display: -ms-grid;
display: grid;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
place-items: center;
background: var(--backdrop);
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
z-index: 10;
touch-action: none;
}
:host(.stacked) .popup{
-webkit-transform: scale(0.9) translateY(-2rem) !important;
transform: scale(0.9) translateY(-2rem) !important;
}
.popup{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
-ms-flex-item-align: end;
align-self: flex-end;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: var(--width);
min-width: var(--min-width);
height: var(--height);
min-height: var(--min-height);
max-height: 90vh;
border-radius: var(--border-radius);
-webkit-transform: scale(1) translateY(100%);
transform: scale(1) translateY(100%);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s;
background: rgba(var(--foreground-color), 1);
-webkit-box-shadow: 0 -1rem 2rem #00000020;
box-shadow: 0 -1rem 2rem #00000020;
content-visibility: auto;
}
.container-header{
display: -webkit-box;
display: flex;
width: 100%;
touch-action: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.popup-top{
display: -webkit-box;
display: flex;
width: 100%;
}
.popup-body{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
padding: var(--body-padding);
overflow-y: auto;
}
.hide{
opacity: 0;
pointer-events: none;
visiblity: none;
}
@media screen and (min-width: 640px){
:host{
--border-radius: 0.4rem;
}
.popup{
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-radius: var(--border-radius);
height: var(--height);
-webkit-transform: scale(1) translateY(3rem);
transform: scale(1) translateY(3rem);
-webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
box-shadow: 0 3rem 2rem -0.5rem #00000040;
}
}
@media screen and (max-width: 640px){
.popup-top{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
}
.handle{
height: 0.3rem;
width: 2rem;
background: rgba(var(--text-color), .4);
border-radius: 1rem;
margin: 0.5rem 0;
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-thumb{
background: rgba(var(--text-color), 0.3);
border-radius: 1rem;
&:hover{
background: rgba(var(--text-color), 0.5);
}
}
}
</style>
<div part="background" class="popup-container hide" role="dialog">
<div part="popup" class="popup">
<div part="popup-header" class="popup-top">
<div class="handle"></div>
<slot name="header"></slot>
</div>
<div part="popup-body" class="popup-body">
<slot></slot>
</div>
</div>
</div>
`;
customElements.define('sm-popup', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smPopup.content.cloneNode(true))
this.allowClosing = false
this.isOpen = false
this.resumeScrolling = this.resumeScrolling.bind(this)
this.show = this.show.bind(this)
this.hide = this.hide.bind(this)
this.handleTouchStart = this.handleTouchStart.bind(this)
this.handleTouchMove = this.handleTouchMove.bind(this)
this.handleTouchEnd = this.handleTouchEnd.bind(this)
this.movePopup = this.movePopup.bind(this)
}
get open() {
return this.isOpen
}
resumeScrolling(){
const scrollY = document.body.style.top;
window.scrollTo(0, parseInt(scrollY || '0') * -1);
setTimeout(() => {
document.body.style.overflow = 'auto';
document.body.style.top= 'initial'
}, 300);
}
show(pinned, popupStack){
if (popupStack)
this.popupStack = popupStack
if (this.popupStack && !this.hasAttribute('open')) {
this.popupStack.push({
popup: this,
permission: pinned
})
if (this.popupStack.items.length > 1) {
this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
}
this.dispatchEvent(
new CustomEvent("popupopened", {
bubbles: true,
detail: {
popup: this,
popupStack: this.popupStack
}
})
)
this.setAttribute('open', '')
this.pinned = pinned
this.isOpen = true
}
this.popupContainer.classList.remove('hide')
this.popup.style.transform = 'none';
document.body.style.overflow = 'hidden';
document.body.style.top= `-${window.scrollY}px`
return this.popupStack
}
hide(){
if (window.innerWidth < 640)
this.popup.style.transform = 'translateY(100%)';
else
this.popup.style.transform = 'translateY(3rem)';
this.popupContainer.classList.add('hide')
this.removeAttribute('open')
if (typeof this.popupStack !== 'undefined') {
this.popupStack.pop()
if (this.popupStack.items.length) {
this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
} else {
this.resumeScrolling()
}
} else {
this.resumeScrolling()
}
if (this.inputFields.length) {
setTimeout(() => {
this.inputFields.forEach(field => {
if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
field.checked = false
if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
field.value = ''
})
}, 300);
}
setTimeout(() => {
this.dispatchEvent(
new CustomEvent("popupclosed", {
bubbles: true,
detail: {
popup: this,
popupStack: this.popupStack
}
})
)
this.isOpen = false
}, 300);
}
handleTouchStart(e){
this.touchStartY = e.changedTouches[0].clientY
this.popup.style.transition = 'transform 0.1s'
this.touchStartTime = e.timeStamp
}
handleTouchMove(e){
if (this.touchStartY < e.changedTouches[0].clientY) {
this.offset = e.changedTouches[0].clientY - this.touchStartY;
this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
}
/*else {
this.offset = this.touchStartY - e.changedTouches[0].clientY;
this.popup.style.transform = `translateY(-${this.offset}px)`
}*/
}
handleTouchEnd(e){
this.touchEndTime = e.timeStamp
cancelAnimationFrame(this.touchEndAnimataion)
this.touchEndY = e.changedTouches[0].clientY
this.popup.style.transition = 'transform 0.3s'
this.threshold = this.popup.getBoundingClientRect().height * 0.3
if (this.touchEndTime - this.touchStartTime > 200) {
if (this.touchEndY - this.touchStartY > this.threshold) {
if (this.pinned) {
this.show()
return
} else
this.hide()
} else {
this.show()
}
} else {
if (this.touchEndY > this.touchStartY)
if (this.pinned) {
this.show()
return
}
else
this.hide()
}
}
movePopup(){
this.popup.style.transform = `translateY(${this.offset}px)`
}
connectedCallback() {
this.pinned = false
this.popupStack
this.popupContainer = this.shadowRoot.querySelector('.popup-container')
this.popup = this.shadowRoot.querySelector('.popup')
this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
this.offset
this.popupHeader = this.shadowRoot.querySelector('.popup-top')
this.touchStartY = 0
this.touchEndY = 0
this.touchStartTime = 0
this.touchEndTime = 0
this.touchEndAnimataion;
this.threshold = this.popup.getBoundingClientRect().height * 0.3
if (this.hasAttribute('open'))
this.show()
this.popupContainer.addEventListener('mousedown', e => {
if (e.target === this.popupContainer && !this.pinned) {
if (this.pinned) {
this.show()
return
} else
this.hide()
}
})
this.popupBodySlot.addEventListener('slotchange', () => {
setTimeout(() => {
this.threshold = this.popup.getBoundingClientRect().height * 0.3
}, 200);
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
})
this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
}
disconnectedCallback() {
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
}
})

1
Standard UI Components/dist/popup.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

185
Standard UI Components/dist/radio.js vendored Normal file
View File

@ -0,0 +1,185 @@
const smRadio = document.createElement('template')
smRadio.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
--gap: 0.5rem;
--height: 1.4rem;
}
:host([disabled]) {
opacity: 0.6;
user-select: none;
pointer-events: none;
}
.hide{
display: none !important;
}
.radio{
display: flex;
cursor: pointer;
}
.radio__button{
position: relative;
height: var(--height);
width: var(--height);
overflow: visible;
padding: 0.1rem;
}
.outer-disc{
fill: none;
stroke-width: 3;
stroke: rgba(var(--text-color), 0.7);
}
.inner-disc{
fill: var(--accent-color);
transition: transform 0.3s;
transform: scale(0);
transform-origin: center;
}
:host([checked]) .outer-disc{
stroke: var(--accent-color);
}
:host([checked]) .inner-disc{
transform: scale(1);
}
@media (any-hover: hover){
}
</style>
<div class="radio">
<slot name="left"></slot>
<svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>
<slot></slot>
</div>
`
window.customElements.define('sm-radio', class extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: 'open'
}).append(smRadio.content.cloneNode(true))
this.radio = this.shadowRoot.querySelector('.radio');
this.reset = this.reset.bind(this)
this.dispatchChangeEvent = this.dispatchChangeEvent.bind(this)
this.dispatchGroupEvent = this.dispatchGroupEvent.bind(this)
this.handleKeyup = this.handleKeyup.bind(this)
this.handleClick = this.handleClick.bind(this)
this.handleRadioGroup = this.handleRadioGroup.bind(this)
this.options = {
bubbles: true,
composed: true,
detail: {
value: this.value,
}
}
}
static get observedAttributes() {
return ['value', 'disabled', 'checked']
}
get disabled() {
return this.hasAttribute('disabled')
}
set disabled(val) {
if (val) {
this.setAttribute('disabled', '')
} else {
this.removeAttribute('disabled')
}
}
get checked() {
return this.hasAttribute('checked')
}
set checked(value) {
if (value) {
this.setAttribute('checked', '')
}
else {
this.removeAttribute('checked')
}
}
set value(val) {
this.setAttribute('value', val)
}
get value() {
return this.getAttribute('value')
}
reset() {
this.removeAttribute('checked')
}
dispatchChangeEvent() {
this.dispatchEvent(new CustomEvent('change', this.options))
}
dispatchGroupEvent() {
if (this.hasAttribute('name') && this.getAttribute('name').trim() !== '') {
this.dispatchEvent(new CustomEvent(`changed${this.getAttribute('name')}`, this.options))
}
}
handleKeyup(e){
if (e.code === "Space") {
this.handleClick()
}
}
handleClick() {
if (!this.hasAttribute('checked')) {
this.setAttribute('checked', '')
this.dispatchGroupEvent()
}
}
handleRadioGroup(e) {
if (e.detail.value !== this.getAttribute('value')) {
this.reset()
}
}
connectedCallback() {
if (!this.hasAttribute('disabled')) {
this.setAttribute('tabindex', '0')
}
this.setAttribute('role', 'radio')
if (!this.hasAttribute('checked')) {
this.setAttribute('aria-checked', 'false')
}
this.addEventListener('keyup', this.handleKeyup)
this.addEventListener('click', this.handleClick)
if (this.hasAttribute('name') && this.getAttribute('name').trim() !== '') {
document.addEventListener(`changed${this.getAttribute('name')}`, this.handleRadioGroup)
}
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === 'checked') {
this.dispatchChangeEvent()
}
else if (name === 'disabled') {
if (this.hasAttribute('disabled')) {
this.removeAttribute('tabindex')
}
else {
this.setAttribute('tabindex', '0')
}
}
}
}
disconnectedCallback() {
this.removeEventListener('keyup', this.handleKeyup)
this.removeEventListener('change', this.handleClick)
}
});

1
Standard UI Components/dist/radio.min.js vendored Normal file
View File

@ -0,0 +1 @@
const smRadio=document.createElement("template");smRadio.innerHTML='\n<style>\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), 0.7);\n }\n .inner-disc{\n fill: var(--accent-color);\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: center;\n }\n :host([checked]) .outer-disc{\n stroke: var(--accent-color);\n }\n :host([checked]) .inner-disc{\n transform: scale(1);\n }\n\n @media (any-hover: hover){\n }\n</style>\n<div class="radio">\n <slot name="left"></slot>\n <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.options={bubbles:!0,composed:!0,detail:{value:this.value}}}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyup(t){"Space"===t.code&&this.handleClick()}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.value!==this.getAttribute("value")&&this.reset()}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});

387
Standard UI Components/dist/select.js vendored Normal file
View File

@ -0,0 +1,387 @@
const smSelect = document.createElement('template')
smSelect.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.icon {
fill: none;
height: 0.8rem;
width: 0.8rem;
stroke: rgba(var(--text-color), 0.7);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
--max-height: auto;
--min-width: 100%;
}
.hide{
display: none !important;
}
.select{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
cursor: pointer;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.option-text{
font-size: 0.9rem;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.selection{
border-radius: 0.3rem;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto;
grid-template-columns: 1fr auto;
grid-template-areas: 'heading heading' '. .';
padding: 0.4rem 1rem;
background: rgba(var(--text-color), 0.06);
border: solid 1px rgba(var(--text-color), 0.2);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
outline: none;
}
.selection:focus{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
box-shadow: 0 0 0 0.1rem var(--accent-color)
}
.icon{
margin-left: 1rem;
}
:host([align-select="left"]) .options{
left: 0;
}
:host([align-select="right"]) .options{
right: 0;
}
.options{
top: 100%;
margin-top: 0.5rem;
overflow: hidden auto;
position: absolute;
grid-area: options;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: var(--min-width);
max-height: var(--max-height);
background: rgba(var(--foreground-color), 1);
border: solid 1px rgba(var(--text-color), 0.2);
border-radius: 0.3rem;
z-index: 2;
-webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
}
.rotate{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
}
@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);
}
}
}
</style>
<div class="select" >
<div class="selection" tabindex="0">
<div class="option-text"></div>
<svg class="icon toggle" viewBox="0 0 64 64">
<polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
</svg>
</div>
<div part="options" class="options hide">
<slot></slot>
</div>
</div>`;
customElements.define('sm-select', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smSelect.content.cloneNode(true))
this.reset = this.reset.bind(this)
}
static get observedAttributes() {
return ['value']
}
get value() {
return this.getAttribute('value')
}
set value(val) {
this.setAttribute('value', val)
}
reset(){
}
collapse() {
this.chevron.classList.remove('rotate')
this.optionList.animate(this.slideUp, this.animationOptions)
.onfinish = () => {
this.optionList.classList.add('hide')
this.open = false
}
}
connectedCallback() {
this.availableOptions
this.optionList = this.shadowRoot.querySelector('.options')
this.chevron = this.shadowRoot.querySelector('.toggle')
let slot = this.shadowRoot.querySelector('.options slot'),
selection = this.shadowRoot.querySelector('.selection'),
previousOption
this.open = false;
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'
}
selection.addEventListener('click', e => {
if (!this.open) {
this.optionList.classList.remove('hide')
this.optionList.animate(this.slideDown, this.animationOptions)
this.chevron.classList.add('rotate')
this.open = true
} else {
this.collapse()
}
})
selection.addEventListener('keydown', e => {
if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
e.preventDefault()
this.availableOptions[0].focus()
}
if (e.code === 'Enter' || e.code === 'Space')
if (!this.open) {
this.optionList.classList.remove('hide')
this.optionList.animate(this.slideDown, this.animationOptions)
this.chevron.classList.add('rotate')
this.open = true
} else {
this.collapse()
}
})
this.optionList.addEventListener('keydown', e => {
if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
e.preventDefault()
if (document.activeElement.previousElementSibling) {
document.activeElement.previousElementSibling.focus()
}
}
if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
e.preventDefault()
if (document.activeElement.nextElementSibling)
document.activeElement.nextElementSibling.focus()
}
})
this.addEventListener('optionSelected', e => {
if (previousOption !== e.target) {
this.setAttribute('value', e.detail.value)
this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
composed: true,
detail: {
value: e.detail.value
}
}))
if (previousOption) {
previousOption.classList.remove('check-selected')
}
previousOption = e.target;
}
if (!e.detail.switching)
this.collapse()
e.target.classList.add('check-selected')
})
slot.addEventListener('slotchange', e => {
this.availableOptions = slot.assignedElements()
if (this.availableOptions[0]) {
let firstElement = this.availableOptions[0];
previousOption = firstElement;
firstElement.classList.add('check-selected')
this.setAttribute('value', firstElement.getAttribute('value'))
this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
this.availableOptions.forEach((element, index) => {
element.setAttribute('data-rank', index + 1);
element.setAttribute('tabindex', "0");
})
}
});
document.addEventListener('mousedown', e => {
if (!this.contains(e.target) && this.open) {
this.collapse()
}
})
}
})
// option
const smOption = document.createElement('template')
smOption.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.option{
min-width: 100%;
padding: 0.8rem 1.2rem;
cursor: pointer;
overflow-wrap: break-word;
outline: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
:host(:focus){
outline: none;
background: rgba(var(--text-color), 0.1);
}
:host(:focus) .option .icon{
opacity: 0.4
}
:host(.check-selected) .icon{
opacity: 1 !important
}
.icon {
margin-right: 0.8rem;
fill: none;
height: 0.8rem;
width: 0.8rem;
stroke: rgba(var(--text-color), 0.7);
stroke-width: 10;
overflow: visible;
stroke-linecap: round;
border-radius: 1rem;
stroke-linejoin: round;
opacity: 0;
}
@media (hover: hover){
.option:hover{
background: rgba(var(--text-color), 0.1);
}
.option:hover .icon{
opacity: 0.4
}
}
</style>
<div class="option">
<svg class="icon" viewBox="0 0 64 64">
<polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
</svg>
<slot></slot>
</div>`;
customElements.define('sm-option', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smOption.content.cloneNode(true))
}
sendDetails(switching) {
let optionSelected = new CustomEvent('optionSelected', {
bubbles: true,
composed: true,
detail: {
text: this.textContent,
value: this.getAttribute('value'),
switching: switching
}
})
this.dispatchEvent(optionSelected)
}
connectedCallback() {
let validKey = [
'ArrowUp',
'ArrowDown',
'ArrowLeft',
'ArrowRight'
]
this.addEventListener('click', e => {
this.sendDetails()
})
this.addEventListener('keyup', e => {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault()
this.sendDetails(false)
}
if (validKey.includes(e.code)) {
e.preventDefault()
this.sendDetails(true)
}
})
if (this.hasAttribute('default')) {
setTimeout(() => {
this.sendDetails()
}, 0);
}
}
})

1
Standard UI Components/dist/select.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

324
Standard UI Components/dist/strip-select.js vendored Normal file
View File

@ -0,0 +1,324 @@
const stripSelect = document.createElement('template')
stripSelect.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
--gap: 0.5rem;
}
.hide{
display: none !important;
}
input[type="radio"]{
display: none;
}
.scrolling-container{
position: relative;
display: flex;
align-items: center;
padding: 1rem 0;
}
.strip-select{
display: grid;
grid-auto-flow: column;
gap: var(--gap);
position: relative;
max-width: 100%;
align-items: center;
overflow: auto hidden;
}
.nav-button{
display: flex;
top: 50%;
z-index: 2;
border: none;
padding: 0.3rem;
cursor: pointer;
position: absolute;
align-items: center;
background: var(--background-color);
transform: translateY(-50%);
}
.nav-button--right{
right: 0;
}
.cover{
position: absolute;
z-index: 1;
width: 5rem;
height: 100%;
pointer-events: none;
}
.cover--left{
background: linear-gradient(90deg, var(--background-color) 60%, transparent);
}
.cover--right{
right: 0;
background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
}
.nav-button--right::before{
background-color: red;
}
.icon{
height: 1.5rem;
width: 1.5rem;
fill: rgba(var(--text-color), .8);
}
@media (hover: none){
::-webkit-scrollbar-track {
background-color: transparent !important;
}
::-webkit-scrollbar {
height: 0;
background-color: transparent;
}
.nav-button{
display: none;
}
.strip-select{
overflow: auto hidden;
}
.cover{
width: 2rem;
}
}
@media (hover: hover){
.strip-select{
overflow: hidden;
}
}
</style>
<section class="scrolling-container">
<div class="cover cover--left hide"></div>
<button class="nav-button nav-button--left hide">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
</button>
<section class="strip-select">
<slot></slot>
</section>
<button class="nav-button nav-button--right hide">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
</button>
<div class="cover cover--right hide"></div>
</section>
`
customElements.define('strip-select', class extends HTMLElement{
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(stripSelect.content.cloneNode(true))
this.stripSelect = this.shadowRoot.querySelector('.strip-select')
this.slottedOptions
this._value
this.scrollDistance
this.scrollLeft = this.scrollLeft.bind(this)
this.scrollRight = this.scrollRight.bind(this)
this.fireEvent = this.fireEvent.bind(this)
}
get value() {
return this._value
}
scrollLeft(){
this.stripSelect.scrollBy({
left: -this.scrollDistance,
behavior: 'smooth'
})
}
scrollRight(){
this.stripSelect.scrollBy({
left: this.scrollDistance,
behavior: 'smooth'
})
}
fireEvent(){
this.dispatchEvent(
new CustomEvent("change", {
bubbles: true,
composed: true,
detail: {
value: this._value
}
})
)
}
connectedCallback() {
const slot = this.shadowRoot.querySelector('slot')
const coverLeft = this.shadowRoot.querySelector('.cover--left')
const coverRight = this.shadowRoot.querySelector('.cover--right')
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 => {
if (elem.hasAttribute('selected')) {
elem.setAttribute('active', '')
this._value = elem.value
}
})
if (assignedElements.length > 0) {
firstOptionObserver.observe(slot.assignedElements()[0])
lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1])
}
else {
navButtonLeft.classList.add('hide')
navButtonRight.classList.add('hide')
coverLeft.classList.add('hide')
coverRight.classList.add('hide')
firstOptionObserver.disconnect()
lastOptionObserver.disconnect()
}
})
const resObs = new ResizeObserver(entries => {
entries.forEach(entry => {
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)
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.fireEvent()
}
})
const firstOptionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navButtonLeft.classList.add('hide')
coverLeft.classList.add('hide')
}
else {
navButtonLeft.classList.remove('hide')
coverLeft.classList.remove('hide')
}
})
},
{
threshold: 0.9,
root: this
})
const lastOptionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navButtonRight.classList.add('hide')
coverRight.classList.add('hide')
}
else {
navButtonRight.classList.remove('hide')
coverRight.classList.remove('hide')
}
})
},
{
threshold: 0.9,
root: this
})
navButtonLeft.addEventListener('click', this.scrollLeft)
navButtonRight.addEventListener('click', this.scrollRight)
}
disconnectedCallback() {
navButtonLeft.removeEventListener('click', this.scrollLeft)
navButtonRight.removeEventListener('click', this.scrollRight)
}
})
//Strip option
const stripOption = document.createElement('template')
stripOption.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
--border-radius: 2rem;
--background-color: inherit;
--active-option-color: inherit;
--active-option-backgroud-color: rgba(var(--text-color), .2);
}
.hide{
display: none !important;
}
.strip-option{
display: flex;
flex-shrink: 0;
cursor: pointer;
white-space: nowrap;
padding: 0.5rem 0.8rem;
transition: background 0.3s;
border-radius: var(--border-radius);
box-shadow: 0 0 0 1px rgba(var(--text-color), .2) inset;
-webkit-tap-highlight-color: transparent;
}
:host([active]) .strip-option{
color: var(--active-option-color);
background-color: var(--active-option-backgroud-color);
}
:host(:hover:not([active])) .strip-option{
background-color: rgba(var(--text-color), 0.06);
}
</style>
<label class="strip-option" tabindex="0">
<slot></slot>
</label>
`
customElements.define('strip-option', class extends HTMLElement{
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(stripOption.content.cloneNode(true))
this._value
this.radioButton = this.shadowRoot.querySelector('input')
this.fireEvent = this.fireEvent.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
}
get value() {
return this._value
}
fireEvent(){
this.dispatchEvent(
new CustomEvent("option-clicked", {
bubbles: true,
composed: true,
detail: {
value: this._value
}
})
)
}
handleKeyDown(e){
if (e.key === 'Enter' || e.key === 'Space') {
this.fireEvent()
}
}
connectedCallback() {
this._value = this.getAttribute('value')
this.addEventListener('click', this.fireEvent)
this.addEventListener('keydown', this.handleKeyDown)
}
disconnectedCallback() {
this.removeEventListener('click', this.fireEvent)
this.removeEventListener('keydown', this.handleKeyDown)
}
})

1
Standard UI Components/dist/strip-select.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

228
Standard UI Components/dist/switch.js vendored Normal file
View File

@ -0,0 +1,228 @@
const smSwitch = document.createElement('template')
smSwitch.innerHTML = `
<style>
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
label{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
:host(:not([disabled])) label:focus-visible{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
box-shadow: 0 0 0 0.1rem var(--accent-color);
}
:host([disabled]) {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.switch {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 2.4rem;
flex-shrink: 0;
margin-left: auto;
padding: 0.2rem;
cursor: pointer;
border-radius: 2rem;
}
input {
display: none;
}
.track {
position: absolute;
left: 0;
right: 0;
height: 1.4rem;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
background: rgba(var(--text-color), 0.4);
-webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
box-shadow: 0 0.1rem 0.3rem #00000040 inset;
border-radius: 1rem;
}
.switch:active .button::after,
.switch:focus .button::after{
opacity: 1
}
.switch:focus-visible .button::after{
opacity: 1
}
.button::after{
content: '';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
height: 2.6rem;
width: 2.6rem;
background: rgba(var(--text-color), 0.2);
border-radius: 2rem;
opacity: 0;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.button {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 1rem;
width: 1rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 1rem;
-webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
box-shadow: 0 0.1rem 0.4rem #00000060;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
border: solid 0.3rem white;
}
input:checked ~ .button {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
input:checked ~ .track {
background: var(--accent-color);
}
</style>
<label tabindex="0">
<slot name="left"></slot>
<div part="switch" class="switch">
<input type="checkbox">
<div class="track"></div>
<div class="button"></div>
</div>
<slot name="right"></slot>
</label>`
customElements.define('sm-switch', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smSwitch.content.cloneNode(true))
this.switch = this.shadowRoot.querySelector('.switch');
this.input = this.shadowRoot.querySelector('input')
this.isChecked = false
this.isDisabled = false
this.dispatch = this.dispatch.bind(this)
}
static get observedAttributes() {
return ['disabled', 'checked']
}
get disabled() {
return this.isDisabled
}
set disabled(val) {
if (val) {
this.setAttribute('disabled', '')
} else {
this.removeAttribute('disabled')
}
}
get checked() {
return this.isChecked
}
set checked(value) {
if (value) {
this.setAttribute('checked', '')
} else {
this.removeAttribute('checked')
}
}
dispatch(){
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
composed: true,
detail: {
value: this.isChecked
}
}))
}
connectedCallback() {
this.addEventListener('keyup', e => {
if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
this.input.click()
}
})
this.input.addEventListener('click', e => {
if (this.input.checked)
this.checked = true
else
this.checked = false
this.dispatch()
})
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === 'disabled') {
if (this.hasAttribute('disabled')) {
this.disabled = true
}
else {
this.disabled = false
}
}
else if (name === 'checked') {
if (this.hasAttribute('checked')) {
this.isChecked = true
this.input.checked = true
}
else {
this.isChecked = false
this.input.checked = false
}
}
}
}
})

1
Standard UI Components/dist/switch.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

412
Standard UI Components/dist/tabs.js vendored Normal file
View File

@ -0,0 +1,412 @@
const smTabHeader = document.createElement('template')
smTabHeader.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tabs{
position: relative;
display: -ms-grid;
display: grid;
width: 100%;
}
.tab-header{
display: -ms-grid;
display: grid;
grid-auto-flow: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 1rem;
position: relative;
overflow: auto hidden;
max-width: 100%;
scrollbar-width: 0;
}
.indicator{
position: absolute;
left: 0;
bottom: 0;
height: 0.15rem;
border-radius: 1rem 1rem 0 0;
background: var(--accent-color);
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
transition: width 0.3s, -webkit-transform 0.3s;
-o-transition: transform 0.3s, width 0.3s;
transition: transform 0.3s, width 0.3s;
transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
pointer-events: none;
}
:host([variant="tab"]) .indicator{
height: 100%;
border-radius: 0.3rem;
}
:host(.round) .indicator{
border-radius: 3rem;
}
:host([variant="tab"]) .tab-header{
border-bottom: none;
}
.hide-completely{
display: none;
}
:host([variant="tab"]) .tab-header{
gap: 0.2rem;
display: -ms-inline-grid;
display: inline-grid;
justify-self: flex-start;
border-radius: 0.3rem;
}
:host([variant="tab"]) slot::slotted(.active){
color: rgba(var(--foreground-color), 1);
}
slot::slotted(.active){
color: var(--accent-color);
opacity: 1;
}
@media (hover: none){
.tab-header::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background-color: transparent !important;
}
.tab-header::-webkit-scrollbar {
height: 0;
background-color: transparent;
}
}
</style>
<div part="tab-container" class="tabs">
<div part="tab-header" class="tab-header">
<slot></slot>
<div part="indicator" class="indicator"></div>
</div>
</div>
`;
customElements.define('sm-tab-header', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smTabHeader.content.cloneNode(true))
this.indicator = this.shadowRoot.querySelector('.indicator');
this.tabSlot = this.shadowRoot.querySelector('slot');
this.tabHeader = this.shadowRoot.querySelector('.tab-header');
}
sendDetails(element) {
this.dispatchEvent(
new CustomEvent("switchtab", {
bubbles: true,
detail: {
target: this.target,
rank: parseInt(element.getAttribute('rank'))
}
})
)
}
moveIndiactor(tabDimensions) {
//if(this.isTab)
this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
//else
//this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
}
connectedCallback() {
if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
this.prevTab
this.allTabs
this.activeTab
this.isTab = false
this.target = this.getAttribute('target')
if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
this.isTab = true
}
this.tabSlot.addEventListener('slotchange', () => {
this.tabSlot.assignedElements().forEach((tab, index) => {
tab.setAttribute('rank', index)
})
})
this.allTabs = this.tabSlot.assignedElements();
this.tabSlot.addEventListener('click', e => {
if (e.target === this.prevTab || !e.target.closest('sm-tab'))
return
if (this.prevTab)
this.prevTab.classList.remove('active')
e.target.classList.add('active')
e.target.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
})
this.moveIndiactor(e.target.getBoundingClientRect())
this.sendDetails(e.target)
this.prevTab = e.target;
this.activeTab = e.target;
})
let resizeObserver = new ResizeObserver(entries => {
entries.forEach((entry) => {
if (this.prevTab) {
let tabDimensions = this.activeTab.getBoundingClientRect();
this.moveIndiactor(tabDimensions)
}
})
})
resizeObserver.observe(this)
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.indicator.style.transition = 'none'
if (this.activeTab) {
let tabDimensions = this.activeTab.getBoundingClientRect();
this.moveIndiactor(tabDimensions)
} else {
this.allTabs[0].classList.add('active')
let tabDimensions = this.allTabs[0].getBoundingClientRect();
this.moveIndiactor(tabDimensions)
this.sendDetails(this.allTabs[0])
this.prevTab = this.tabSlot.assignedElements()[0];
this.activeTab = this.prevTab;
}
}
})
}, {
threshold: 1.0
})
observer.observe(this)
}
})
// tab
const smTab = document.createElement('template')
smTab.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
z-index: 1;
}
.tab{
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
padding: 0.4rem 0.8rem;
font-weight: 500;
word-spacing: 0.1rem;
text-align: center;
-webkit-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
text-transform: capitalize;
height: 100%;
}
@media (hover: hover){
:host(.active) .tab{
opacity: 1;
}
.tab{
opacity: 0.7
}
.tab:hover{
opacity: 1
}
}
</style>
<div part="tab" class="tab">
<slot></slot>
</div>
`;
customElements.define('sm-tab', class extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({
mode: 'open'
}).append(smTab.content.cloneNode(true))
}
})
// tab-panels
const smTabPanels = document.createElement('template')
smTabPanels.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
width: 100%;
}
.panel-container{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
overflow: hidden auto;
}
slot::slotted(.hide-completely){
display: none;
}
@media (hover: none){
.tab-header::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background-color: transparent !important;
}
.tab-header::-webkit-scrollbar {
height: 0;
background-color: transparent;
}
}
</style>
<div part="panel-container" class="panel-container">
<slot>Nothing to see here.</slot>
</div>
`;
customElements.define('sm-tab-panels', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smTabPanels.content.cloneNode(true))
this.panelSlot = this.shadowRoot.querySelector('slot');
}
connectedCallback() {
//animations
let flyInLeft = [{
opacity: 0,
transform: 'translateX(-1rem)'
},
{
opacity: 1,
transform: 'none'
}
],
flyInRight = [{
opacity: 0,
transform: 'translateX(1rem)'
},
{
opacity: 1,
transform: 'none'
}
],
flyOutLeft = [{
opacity: 1,
transform: 'none'
},
{
opacity: 0,
transform: 'translateX(-1rem)'
}
],
flyOutRight = [{
opacity: 1,
transform: 'none'
},
{
opacity: 0,
transform: 'translateX(1rem)'
}
],
animationOptions = {
duration: 300,
fill: 'forwards',
easing: 'ease'
}
this.prevPanel
this.allPanels
this.previousRank
this.panelSlot.addEventListener('slotchange', () => {
this.panelSlot.assignedElements().forEach((panel) => {
panel.classList.add('hide-completely')
})
})
this.allPanels = this.panelSlot.assignedElements()
this._targetBodyFlyRight = (targetBody) => {
targetBody.classList.remove('hide-completely')
targetBody.animate(flyInRight, animationOptions)
}
this._targetBodyFlyLeft = (targetBody) => {
targetBody.classList.remove('hide-completely')
targetBody.animate(flyInLeft, animationOptions)
}
document.addEventListener('switchtab', e => {
if (e.detail.target !== this.id)
return
if (this.prevPanel) {
let targetBody = this.allPanels[e.detail.rank],
currentBody = this.prevPanel;
if (this.previousRank < e.detail.rank) {
if (currentBody && !targetBody)
currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
currentBody.classList.add('hide-completely')
}
else if (targetBody && !currentBody) {
this._targetBodyFlyRight(targetBody)
} else if (currentBody && targetBody) {
currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
currentBody.classList.add('hide-completely')
this._targetBodyFlyRight(targetBody)
}
}
} else {
if (currentBody && !targetBody)
currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
currentBody.classList.add('hide-completely')
}
else if (targetBody && !currentBody) {
this._targetBodyFlyLeft(targetBody)
} else if (currentBody && targetBody) {
currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
currentBody.classList.add('hide-completely')
this._targetBodyFlyLeft(targetBody)
}
}
}
} else {
this.allPanels[e.detail.rank].classList.remove('hide-completely')
}
this.previousRank = e.detail.rank
this.prevPanel = this.allPanels[e.detail.rank];
})
}
})

1
Standard UI Components/dist/tabs.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

207
Standard UI Components/dist/tags-input.js vendored Normal file
View File

@ -0,0 +1,207 @@
const tagsInput = document.createElement('template')
tagsInput.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
:host{
--border-radius: 0.3rem;
}
.hide{
display: none !important;
}
.tags-wrapper{
position: relative;
display: flex;
cursor: text;
flex-wrap: wrap;
justify-items: flex-start;
align-items: center;
padding: 0.5rem 0.5rem 0 0.5rem;
border-radius: var(--border-radius);
background-color: rgba(var(--text-color), 0.06);
}
.tags-wrapper:focus-within{
box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
}
.tag {
cursor: pointer;
user-select: none;
align-items: center;
display: inline-flex;
border-radius: 0.3rem;
padding: 0.3rem 0.5rem;
margin: 0 0.5rem 0.5rem 0;
background-color: rgba(var(--text-color), 0.06);
}
.icon {
height: 1.2rem;
width: 1.2rem;
margin-left: 0.3rem;
fill: rgba(var(--text-color), 0.8);
}
input,
input:focus {
outline: none;
border: none;
}
input {
display: inline-flex;
width: auto;
color: inherit;
max-width: inherit;
font-size: inherit;
font-family: inherit;
padding: 0.4rem 0.5rem;
margin: 0 0.5rem 0.5rem 0;
background-color: transparent;
}
.placeholder{
position: absolute;
padding: 0 0.5rem;
top: 50%;
font-weight: 500;
transform: translateY(-50%);
color: rgba(var(--text-color), 0.6);
}
</style>
<div class="tags-wrapper">
<input type="text" size="3"/>
<p class="placeholder"></p>
</div>
`
customElements.define('tags-input', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(tagsInput.content.cloneNode(true))
this.input = this.shadowRoot.querySelector('input')
this.tagsWrapper = this.shadowRoot.querySelector('.tags-wrapper')
this.placeholder = this.shadowRoot.querySelector('.placeholder')
this.observeList = ['placeholder', 'limit']
this.limit = undefined
this.tags = new Set()
this.reset = this.reset.bind(this)
this.handleInput = this.handleInput.bind(this)
this.handleKeydown = this.handleKeydown.bind(this)
this.handleClick = this.handleClick.bind(this)
this.removeTag = this.removeTag.bind(this)
}
static get observedAttributes() {
return ['placeholder', 'limit']
}
get value() {
return [...this.tags].join()
}
reset(){
this.input.value = ''
this.tags.clear()
while (this.input.previousElementSibling) {
this.input.previousElementSibling.remove()
}
}
handleInput(e){
const inputValueLength = e.target.value.trim().length
e.target.setAttribute('size', inputValueLength ? inputValueLength : '3')
if (inputValueLength) {
this.placeholder.classList.add('hide')
}
else if (!inputValueLength && !this.tags.size) {
this.placeholder.classList.remove('hide')
}
}
handleKeydown(e){
if (e.key === ',' || e.key === '/') {
e.preventDefault()
}
if (e.target.value.trim() !== '') {
if (e.key === 'Enter' || e.key === ',' || e.key === '/' || e.code === 'Space') {
const tagValue = e.target.value.trim()
if (this.tags.has(tagValue)) {
this.tagsWrapper.querySelector(`[data-value="${tagValue}"]`).animate([
{
backgroundColor: 'initial'
},
{
backgroundColor: 'var(--accent-color)'
},
{
backgroundColor: 'initial'
},
], {
duration: 300,
easing: 'ease'
})
}
else {
const tag = document.createElement('span')
tag.dataset.value = tagValue
tag.className = 'tag'
tag.innerHTML = `
<span class="tag-text">${tagValue}</span>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
`
this.input.before(tag)
this.tags.add(tagValue)
}
e.target.value = ''
e.target.setAttribute('size', '3')
if (this.limit && this.limit < this.tags.size + 1) {
this.input.readOnly = true
return
}
}
}
else {
if (e.key === 'Backspace' && this.input.previousElementSibling) {
this.removeTag(this.input.previousElementSibling)
}
if (this.limit && this.limit > this.tags.size) {
this.input.readOnly = false
}
}
}
handleClick(e){
if (e.target.closest('.tag')) {
this.removeTag(e.target.closest('.tag'))
}
else {
this.input.focus()
}
}
removeTag(tag){
this.tags.delete(tag.dataset.value)
tag.remove()
if (!this.tags.size) {
this.placeholder.classList.remove('hide')
}
}
connectedCallback() {
this.input.addEventListener('input', this.handleInput)
this.input.addEventListener('keydown', this.handleKeydown)
this.tagsWrapper.addEventListener('click', this.handleClick)
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'placeholder') {
this.placeholder.textContent = newValue
}
if (name === 'limit') {
this.limit = parseInt(newValue)
}
}
disconnectedCallback() {
this.input.removeEventListener('input', this.handleInput)
this.input.removeEventListener('keydown', this.handleKeydown)
this.tagsWrapper.removeEventListener('click', this.handleClick)
}
})

1
Standard UI Components/dist/tags-input.min.js vendored Normal file
View File

@ -0,0 +1 @@
const tagsInput=document.createElement("template");tagsInput.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n --border-radius: 0.3rem;\n }\n.hide{\n display: none !important;\n}\n.tags-wrapper{\n position: relative;\n display: flex;\n cursor: text;\n flex-wrap: wrap;\n justify-items: flex-start;\n align-items: center;\n padding: 0.5rem 0.5rem 0 0.5rem;\n border-radius: var(--border-radius);\n background-color: rgba(var(--text-color), 0.06);\n }\n .tags-wrapper:focus-within{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n }\n \n .tag {\n cursor: pointer;\n user-select: none;\n align-items: center;\n display: inline-flex;\n border-radius: 0.3rem;\n padding: 0.3rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: rgba(var(--text-color), 0.06);\n }\n \n .icon {\n height: 1.2rem;\n width: 1.2rem;\n margin-left: 0.3rem;\n fill: rgba(var(--text-color), 0.8);\n }\n \n input,\n input:focus {\n outline: none;\n border: none;\n }\n \n input {\n display: inline-flex;\n width: auto;\n color: inherit;\n max-width: inherit;\n font-size: inherit;\n font-family: inherit;\n padding: 0.4rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: transparent;\n }\n .placeholder{\n position: absolute;\n padding: 0 0.5rem;\n top: 50%;\n font-weight: 500;\n transform: translateY(-50%);\n color: rgba(var(--text-color), 0.6);\n }\n </style>\n <div class="tags-wrapper">\n <input type="text" size="3"/>\n <p class="placeholder"></p>\n </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.observeList=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(e){const t=e.target.value.trim().length;e.target.setAttribute("size",t||"3"),t?this.placeholder.classList.add("hide"):t||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(e){if(","!==e.key&&"/"!==e.key||e.preventDefault(),""!==e.target.value.trim()){if("Enter"===e.key||","===e.key||"/"===e.key||"Space"===e.code){const t=e.target.value.trim();if(this.tags.has(t))this.tagsWrapper.querySelector(`[data-value="${t}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n <span class="tag-text">${t}</span>\n <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n `,this.input.before(e),this.tags.add(t)}if(e.target.value="",e.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===e.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(e){e.target.closest(".tag")?this.removeTag(e.target.closest(".tag")):this.input.focus()}removeTag(e){this.tags.delete(e.dataset.value),e.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){"placeholder"===e&&(this.placeholder.textContent=n),"limit"===e&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});

188
Standard UI Components/dist/textarea.js vendored Normal file
View File

@ -0,0 +1,188 @@
const smTextarea = document.createElement('template')
smTextarea.innerHTML = `
<style>
*,
*::before,
*::after {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-focus-inner{
border: none;
}
.hide{
opacity: 0 !important;
}
:host{
display: grid;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.06);
--padding-right: initial;
--padding-left: initial;
--max-height: 8rem;
}
:host(.outlined) .textarea {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--foreground-color), 1);
}
.textarea{
display: grid;
position: relative;
cursor: text;
min-width: 0;
text-align: left;
overflow: hidden auto;
grid-template-columns: 1fr;
align-items: stretch;
max-height: var(--max-height);
background: var(--background);
border-radius: var(--border-radius);
padding-left: var(--padding-left);
padding-right: var(--padding-right);
}
.textarea::after,
textarea{
padding: 0.7rem 1rem;
width: 100%;
min-width: 1em;
font: inherit;
color: inherit;
resize: none;
grid-area: 2/1;
justify-self: stretch;
background: none;
appearance: none;
border: none;
outline: none;
line-height: 1.5;
overflow: hidden;
}
.textarea::after{
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.readonly{
pointer-events: none;
}
.textarea:focus-within:not(.readonly){
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
}
.disabled{
pointer-events: none;
opacity: 0.6;
}
.placeholder{
position: absolute;
margin: 0.7rem 1rem;
opacity: .7;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
pointer-events: none;
user-select: none;
}
@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);
}
}
}
</style>
<label class="textarea" part="textarea">
<span class="placeholder"></span>
<textarea rows="1"></textarea>
</label>
`;
customElements.define('sm-textarea',
class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(smTextarea.content.cloneNode(true))
this.textarea = this.shadowRoot.querySelector('textarea')
this.textareaBox = this.shadowRoot.querySelector('.textarea')
this.placeholder = this.shadowRoot.querySelector('.placeholder')
this.observeList = ['required', 'readonly', 'rows', 'minlength', 'maxlength']
this.reset = this.reset.bind(this)
this.focusIn = this.focusIn.bind(this)
this.fireEvent = this.fireEvent.bind(this)
this.checkInput = this.checkInput.bind(this)
}
static get observedAttributes() {
return ['value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
}
get value() {
return this.textarea.value
}
set value(val) {
this.setAttribute('value', val)
this.fireEvent()
}
get isValid() {
return this.textarea.checkValidity()
}
reset(){
this.setAttribute('value', '')
}
focusIn(){
this.textarea.focus()
}
fireEvent(){
let event = new Event('input', {
bubbles: true,
cancelable: true,
composed: true
});
this.dispatchEvent(event);
}
checkInput(){
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
return;
if (this.textarea.value !== '') {
this.placeholder.classList.add('hide')
} else {
this.placeholder.classList.remove('hide')
}
}
connectedCallback() {
this.textarea.addEventListener('input', e => {
this.textareaBox.dataset.value = this.textarea.value
this.checkInput()
})
}
attributeChangedCallback(name, oldValue, newValue) {
if (this.observeList.includes(name)) {
if (this.hasAttribute(name)) {
this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
}
else {
this.input.removeAttribute(name)
}
}
else if (name === 'placeholder') {
this.placeholder.textContent = this.getAttribute('placeholder')
}
else if (name === 'value') {
this.textarea.value = newValue;
this.textareaBox.dataset.value = newValue
this.checkInput()
}
}
})

1
Standard UI Components/dist/textarea.min.js vendored Normal file
View File

@ -0,0 +1 @@
const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n::-moz-focus-inner{\n border: none;\n}\n.hide{\n opacity: 0 !important;\n}\n:host{\n display: grid;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.06);\n --padding-right: initial;\n --padding-left: initial;\n --max-height: 8rem;\n}\n:host(.outlined) .textarea {\n box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n background: rgba(var(--foreground-color), 1);\n}\n.textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\n overflow: hidden auto;\n grid-template-columns: 1fr;\n align-items: stretch;\n max-height: var(--max-height);\n background: var(--background);\n border-radius: var(--border-radius);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n}\n.textarea::after,\ntextarea{\n padding: 0.7rem 1rem;\n width: 100%;\n min-width: 1em;\n font: inherit;\n color: inherit;\n resize: none;\n grid-area: 2/1;\n justify-self: stretch;\n background: none;\n appearance: none;\n border: none;\n outline: none;\n line-height: 1.5;\n overflow: hidden;\n}\n.textarea::after{\n content: attr(data-value) \' \';\n visibility: hidden;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n word-wrap: break-word;\n hyphens: auto;\n}\n.readonly{\n pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.disabled{\n pointer-events: none;\n opacity: 0.6;\n}\n.placeholder{\n position: absolute;\n margin: 0.7rem 1rem;\n opacity: .7;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<label class="textarea" part="textarea">\n <span class="placeholder"></span>\n <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.observeList=["required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.observeList.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});

1005
Standard UI Components/index.html
View File

File diff suppressed because it is too large Load Diff

46
Standard UI Components/prettify.js Normal file
View File

@ -0,0 +1,46 @@
!function(){/*
Copyright (C) 2006 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
"undefined"!==typeof window&&(window.PR_SHOULD_USE_CONTINUATION=!0);
(function(){function T(a){function d(e){var a=e.charCodeAt(0);if(92!==a)return a;var c=e.charAt(1);return(a=w[c])?a:"0"<=c&&"7">=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));
e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,g=c.length;a<g;++a){var h=c[a];if(/\\[bdsw]/i.test(h))b.push(h);else{var h=d(h),k;a+2<g&&"-"===c[a+1]?(k=d(c[a+2]),a+=2):k=h;e.push([h,k]);65>k||122<h||(65>k||90<h||e.push([Math.max(65,h)|32,Math.min(k,90)|32]),97>k||122<h||e.push([Math.max(97,h)&-33,Math.min(k,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});c=[];g=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=g[1]+1?g[1]=Math.max(g[1],h[1]):c.push(g=h);for(a=0;a<c.length;++a)h=
c[a],b.push(f(h[0])),h[1]>h[0]&&(h[1]+1>h[0]&&b.push("-"),b.push(f(h[1])));b.push("]");return b.join("")}function m(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),b=a.length,d=[],g=0,h=0;g<b;++g){var k=a[g];"("===k?++h:"\\"===k.charAt(0)&&(k=+k.substring(1))&&(k<=h?d[k]=-1:a[g]=f(k))}for(g=1;g<d.length;++g)-1===d[g]&&(d[g]=++E);for(h=g=0;g<b;++g)k=a[g],
"("===k?(++h,d[h]||(a[g]="(?:")):"\\"===k.charAt(0)&&(k=+k.substring(1))&&k<=h&&(a[g]="\\"+d[k]);for(g=0;g<b;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(e.ignoreCase&&q)for(g=0;g<b;++g)k=a[g],e=k.charAt(0),2<=k.length&&"["===e?a[g]=c(k):"\\"!==e&&(a[g]=k.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var E=0,q=!1,l=!1,n=0,b=a.length;n<b;++n){var p=a[n];if(p.ignoreCase)l=!0;else if(/[a-z]/i.test(p.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
""))){q=!0;l=!1;break}}for(var w={b:8,t:9,n:10,v:11,f:12,r:13},r=[],n=0,b=a.length;n<b;++n){p=a[n];if(p.global||p.multiline)throw Error(""+p);r.push("(?:"+m(p)+")")}return new RegExp(r.join("|"),l?"gi":"g")}function U(a,d){function f(a){var b=a.nodeType;if(1==b){if(!c.test(a.className)){for(b=a.firstChild;b;b=b.nextSibling)f(b);b=a.nodeName.toLowerCase();if("br"===b||"li"===b)m[l]="\n",q[l<<1]=E++,q[l++<<1|1]=a}}else if(3==b||4==b)b=a.nodeValue,b.length&&(b=d?b.replace(/\r\n?/g,"\n"):b.replace(/[ \t\r\n]+/g,
" "),m[l]=b,q[l<<1]=E,E+=b.length,q[l++<<1|1]=a)}var c=/(?:^|\s)nocode(?:\s|$)/,m=[],E=0,q=[],l=0;f(a);return{a:m.join("").replace(/\n$/,""),c:q}}function J(a,d,f,c,m){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},c(a),m.push.apply(m,a.g))}function V(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var c=f.nodeType,d=1===c?d?a:f:3===c?W.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function G(a,d){function f(a){for(var l=a.i,n=a.h,b=[l,"pln"],p=0,q=a.a.match(m)||[],r={},e=0,t=q.length;e<
t;++e){var z=q[e],v=r[z],g=void 0,h;if("string"===typeof v)h=!1;else{var k=c[z.charAt(0)];if(k)g=z.match(k[1]),v=k[0];else{for(h=0;h<E;++h)if(k=d[h],g=z.match(k[1])){v=k[0];break}g||(v="pln")}!(h=5<=v.length&&"lang-"===v.substring(0,5))||g&&"string"===typeof g[1]||(h=!1,v="src");h||(r[z]=v)}k=p;p+=z.length;if(h){h=g[1];var A=z.indexOf(h),C=A+h.length;g[2]&&(C=z.length-g[2].length,A=C-h.length);v=v.substring(5);J(n,l+k,z.substring(0,A),f,b);J(n,l+k+A,h,K(v,h),b);J(n,l+k+C,z.substring(C),f,b)}else b.push(l+
k,v)}a.g=b}var c={},m;(function(){for(var f=a.concat(d),l=[],n={},b=0,p=f.length;b<p;++b){var w=f[b],r=w[3];if(r)for(var e=r.length;0<=--e;)c[r.charAt(e)]=w;w=w[1];r=""+w;n.hasOwnProperty(r)||(l.push(w),n[r]=null)}l.push(/[\0-\uffff]/);m=T(l)})();var E=d.length;return f}function x(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var c=a.hashComments;c&&(a.cStyleComments?(1<c?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(c=a.regexLiterals){var m=(c=1<c?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+m+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+m+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd",new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return G(d,f)}function L(a,d,f){function c(a){var b=a.nodeType;if(1==b&&!t.test(a.className))if("br"===a.nodeName.toLowerCase())m(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(q);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+
d[0].length))&&a.parentNode.insertBefore(l.createTextNode(e),a.nextSibling),m(a),b||a.parentNode.removeChild(a))}}function m(a){function c(a,b){var e=b?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=c(k,1),d=a.nextSibling;k.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,k.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var t=/(?:^|\s)nocode(?:\s|$)/,q=/\r\n?|\n/,l=a.ownerDocument,n=l.createElement("li");a.firstChild;)n.appendChild(a.firstChild);
for(var b=[n],p=0;p<b.length;++p)c(b[p]);d===(d|0)&&b[0].setAttribute("value",d);var w=l.createElement("ol");w.className="linenums";d=Math.max(0,d-1|0)||0;for(var p=0,r=b.length;p<r;++p)n=b[p],n.className="L"+(p+d)%10,n.firstChild||n.appendChild(l.createTextNode("\u00a0")),w.appendChild(n);a.appendChild(w)}function t(a,d){for(var f=d.length;0<=--f;){var c=d[f];I.hasOwnProperty(c)?D.console&&console.warn("cannot override language handler %s",c):I[c]=a}}function K(a,d){a&&I.hasOwnProperty(a)||(a=/^\s*</.test(d)?
"default-markup":"default-code");return I[a]}function M(a){var d=a.j;try{var f=U(a.h,a.l),c=f.a;a.a=c;a.c=f.c;a.i=0;K(d,c)(a);var m=/\bMSIE\s(\d+)/.exec(navigator.userAgent),m=m&&8>=+m[1],d=/\n/g,t=a.a,q=t.length,f=0,l=a.c,n=l.length,c=0,b=a.g,p=b.length,w=0;b[p]=q;var r,e;for(e=r=0;e<p;)b[e]!==b[e+2]?(b[r++]=b[e++],b[r++]=b[e++]):e+=2;p=r;for(e=r=0;e<p;){for(var x=b[e],z=b[e+1],v=e+2;v+2<=p&&b[v+1]===z;)v+=2;b[r++]=x;b[r++]=z;e=v}b.length=r;var g=a.h;a="";g&&(a=g.style.display,g.style.display="none");
try{for(;c<n;){var h=l[c+2]||q,k=b[w+2]||q,v=Math.min(h,k),A=l[c+1],C;if(1!==A.nodeType&&(C=t.substring(f,v))){m&&(C=C.replace(d,"\r"));A.nodeValue=C;var N=A.ownerDocument,u=N.createElement("span");u.className=b[w+1];var B=A.parentNode;B.replaceChild(u,A);u.appendChild(A);f<h&&(l[c+1]=A=N.createTextNode(t.substring(v,h)),B.insertBefore(A,u.nextSibling))}f=v;f>=h&&(c+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(y){D.console&&console.log(y&&y.stack||y)}}var D="undefined"!==typeof window?
window:{},B=["break,continue,do,else,for,if,return,while"],F=[[B,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],
F=[F,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"],Q=[B,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[B,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],
B=[B,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],S=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,W=/\S/,X=x({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,B],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),
I={};t(X,["default-code"]);t(G([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/,
null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);
t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(x({keywords:H,hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(x({keywords:"null,true,false"}),["json"]);t(x({keywords:P,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:S}),["cs"]);t(x({keywords:O,cStyleComments:!0}),["java"]);t(x({keywords:B,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(x({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(x({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",
hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);t(x({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(x({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);t(x({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,
regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="<pre>"+a+"</pre>";
c=c.firstChild;f&&L(c,f,!0);M({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});return c.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function f(){for(var c=D.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;p<x.length&&b.now()<c;p++){for(var d=x[p],l=g,n=d;n=n.previousSibling;){var m=n.nodeType,u=(7===m||8===m)&&n.nodeValue;if(u?!/^\??prettify\b/.test(u):3!==m||/\S/.test(n.nodeValue))break;if(u){l={};u.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){l[b]=c});break}}n=d.className;if((l!==g||r.test(n))&&
!e.test(n)){m=!1;for(u=d.parentNode;u;u=u.parentNode)if(v.test(u.tagName)&&u.className&&r.test(u.className)){m=!0;break}if(!m){d.className+=" prettyprinted";m=l.lang;if(!m){var m=n.match(w),q;!m&&(q=V(d))&&z.test(q.tagName)&&(m=q.className.match(w));m&&(m=m[1])}if(B.test(d.tagName))u=1;else var u=d.currentStyle,y=t.defaultView,u=(u=u?u.whiteSpace:y&&y.getComputedStyle?y.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===u.substring(0,3);y=l.linenums;(y="true"===y||+y)||(y=(y=n.match(/\blinenums\b(?::(\d+))?/))?
y[1]&&y[1].length?+y[1]:!0:!1);y&&L(d,y,u);M({j:m,h:d,m:y,l:u,a:null,i:null,c:null,g:null})}}}p<x.length?D.setTimeout(f,250):"function"===typeof a&&a()}for(var c=d||document.body,t=c.ownerDocument||document,c=[c.getElementsByTagName("pre"),c.getElementsByTagName("code"),c.getElementsByTagName("xmp")],x=[],q=0;q<c.length;++q)for(var l=0,n=c[q].length;l<n;++l)x.push(c[q][l]);var c=null,b=Date;b.now||(b={now:function(){return+new Date}});var p=0,w=/\blang(?:uage)?-([\w.]+)(?!\S)/,r=/\bprettyprint\b/,
e=/\bprettyprinted\b/,B=/pre|xmp/i,z=/^code$/i,v=/^(?:pre|code|xmp)$/i,g={};f()}},H=D.define;"function"===typeof H&&H.amd&&H("google-code-prettify",[],function(){return Y})})();}()

11
Standard UI Components/tsconfig.json Normal file
View File

@ -0,0 +1,11 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "ESNext",
"watch": true,
"lib": ["DOM", "ES2017"]
},
"exclude": [
"node_modules"
]
}