quentin_duwa/qd-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

input text

Browse Source
This commit is contained in:
MastersGame
2026-03-20 18:21:39 +01:00
parent 888def0186
commit 7aaa675875
27 changed files with 1236 additions and 1608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
projects/qd-design-demo/src/app/app.css
View File

@@ -1,276 +1,84 @@
/* You can add global styles to this file, and also import other styles files */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
}
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
}
.label-large {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
@@ -353,7 +161,7 @@ body {
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
@@ -494,4 +302,20 @@ body {
display: none;
}
.display-large {
font-family: var(--font-family-title);
font-size: var(--display-large-font-size);
font-weight: var(--display-large-font-weight);
letter-spacing: var(--display-large-letter-spacing);
line-height: var(--display-large-line-height);
}
.body-medium {
font-family: var(--font-family-content);
font-size: var(--body-medium-font-size);
font-weight: var(--body-medium-font-weight);
letter-spacing: var(--body-medium-letter-spacing);
line-height: var(--body-medium-line-height);
}
/*# sourceMappingURL=app.css.map */

2
projects/qd-design-demo/src/app/app.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../styles.scss","../../../qd-design/src/styles/qd_design_system.scss","../../../qd-design/src/styles/typography/typography.token.scss","../../../qd-design/src/styles/typography/typography.module.scss","../../../qd-design/src/styles/design/look_and_feel.scss","../../../qd-design/src/styles/colors/light-theme.scss","../../../qd-design/src/styles/colors/dark-theme.scss","app.scss"],"names":[],"mappings":"AAAA;ACQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AN9CF;EACE;;;AOFF;EHWE;EACA,gBGX0B;EHgB1B;EGfA;EACA;EACA;;;AAGF;EHIE;EACA,gBGJ0B;EHS1B;;;AGNF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"app.css"}
{"version":3,"sourceRoot":"","sources":["../styles.scss","../../../qd-design/src/styles/qd_design_system.scss","../../../qd-design/src/styles/typography/typography.token.scss","../../../qd-design/src/styles/design/look_and_feel.scss","../../../qd-design/src/styles/colors/light-theme.scss","../../../qd-design/src/styles/colors/dark-theme.scss","app.scss","../../../qd-design/src/styles/typography/typography.module.scss"],"names":[],"mappings":"AAAA;ACQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AL9CF;EACE;;;AMFF;EHWE;EACA,gBGX0B;EHgB1B;EGfA;EACA;EACA;;;AAGF;EHIE;EACA,gBGJ0B;EHS1B;;;AGNF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EC5BE;EACA;EACA;EACA;EACA;;;AD4BF;ECwBE;EACA;EACA;EACA;EACA","file":"app.css"}

10
projects/qd-design-demo/src/app/app.html
View File

@@ -64,9 +64,6 @@
<div class="body-medium">Description</div>
</qd-card>
<qd-card clickable [variant]="'outlined'" style="width: 300px">
<figure image class="image-wrapper">
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
</figure>
<div class="display-large">Coucou</div>
<div class="body-medium">Description</div>
</qd-card>
@@ -78,3 +75,10 @@
<div class="body-medium">Description</div>
</qd-card>
</div>
<div class="horizontal">
<form novalidate (ngSubmit)="confirmForm()">
<input class="checkbox" type="checkbox" [formField]="loginForm.checkEmail"/>
<qd-input-text [formField]="loginForm.email" />
<qd-button variant="filled" [text]="'Confirm'" [iconName]="'checkmark'" [type]="'submit'" [disabled]="loginForm().invalid()"></qd-button>
</form>
</div>

8
projects/qd-design-demo/src/app/app.scss
View File

@@ -26,3 +26,11 @@
display: none;
}
}
.display-large {
@include styles.display-large;
}
.body-medium {
@include styles.body-medium;
}

18
projects/qd-design-demo/src/app/app.ts
View File

@@ -1,21 +1,35 @@
import { Component, signal } from '@angular/core';
import {Component, signal} from '@angular/core';
import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
import {QdIconButton} from '../../../qd-design/src/lib/qd-icon-button/qd-icon-button';
import {QdInputText} from '../../../qd-design/src/lib/qd-input-text/qd-input-text';
import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
import {NgOptimizedImage} from '@angular/common';
import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive';
import {disabled, email, form, FormField, required} from '@angular/forms/signals';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@Component({
selector: 'app-root',
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective],
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective, QdInputText, FormField, FormsModule, ReactiveFormsModule],
templateUrl: './app.html',
standalone: true,
styleUrl: './app.scss'
})
export class App {
protected readonly title = signal('qd-design-demo');
loginModel = signal({checkEmail: true, email: ''});
loginForm = form(this.loginModel, (schemaPath) => {
required(schemaPath.email, {message: 'Email is required'});
email(schemaPath.email, {message: 'Enter a valid email address'});
disabled(schemaPath.email, ({valueOf}) => valueOf(schemaPath.checkEmail))
});
public onClick() {
console.log('clicked');
}
public confirmForm() {
console.log(this.loginModel().email);
console.log(this.loginModel().checkEmail);
}
}