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

added icon button component

Browse Source
This commit is contained in:
MastersGame
2026-02-21 10:17:16 +01:00
parent b23aaf4197
commit 42ddcfe403
16 changed files with 1061 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,6 +14,19 @@
<qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
<qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
</div>
<div class="horizontal">
<qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" tooltip="tooltip"></qd-icon-button>
<qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
<qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
<qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
<qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
<qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
<qd-icon-button variant="text" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
<qd-icon-button variant="text" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
</div>
<div class="horizontal">
<qd-card clickable tooltip="tooltip" style="width: 300px" (click)="onClick()">
<figure image class="image-wrapper">

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

@@ -1,19 +1,19 @@
import { Component, signal } from '@angular/core';
import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum';
import {QdIconButton} from '../../../qd-design/src/lib/qd-icon-button/qd-icon-button';
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';
@Component({
selector: 'app-root',
imports: [QdButton, QdCard, NgOptimizedImage, QdTooltipDirective],
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective],
templateUrl: './app.html',
standalone: true,
styleUrl: './app.scss'
})
export class App {
protected readonly title = signal('qd-design-demo');
protected readonly QdButtonType = QdButtonType;
public onClick() {
console.log('clicked');

9
projects/qd-design/src/directives/qd-button-variant.ts
View File

@@ -1,11 +1,14 @@
import {Directive, HostBinding, Input} from '@angular/core';
import {Directive, input} from '@angular/core';
export type QdButtonVariant = 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
@Directive({
standalone: true,
selector: 'qd-button[variant]'
selector: 'qd-button[variant]',
host: {
'[attr.data-variant]': 'variant()'
}
})
export class QdButtonVariantDirective {
@Input() @HostBinding('attr.data-variant') variant: QdButtonVariant = 'filled';
variant = input<QdButtonVariant>('filled');
}

9
projects/qd-design/src/directives/qd-card-variant.ts
View File

@@ -1,11 +1,14 @@
import {Directive, HostBinding, Input} from '@angular/core';
import {Directive, input} from '@angular/core';
export type QdCardVariant = 'elevated' | 'filled' | 'outlined';
@Directive({
standalone: true,
selector: 'qd-card[variant]'
selector: 'qd-card[variant]',
host: {
'[attr.data-variant]': 'variant()'
}
})
export class QdCardVariantDirective {
@Input() @HostBinding('attr.data-variant') variant: QdCardVariant = 'filled';
variant = input<QdCardVariant>('filled');
}

15
projects/qd-design/src/directives/qd-icon-button-variant.ts Normal file
View File

@@ -0,0 +1,15 @@
import {Directive, input} from '@angular/core';
export type QdIconButtonVariant = 'filled' | 'filled-tonal' | 'outlined' | 'text';
@Directive({
standalone: true,
selector: 'qd-icon-button[variant]',
host: {
'[attr.data-variant]': 'variant()'
}
})
export class QdIconButtonVariantDirective {
variant = input<QdIconButtonVariant>('filled');
}

6
projects/qd-design/src/lib/qd-button/qd-button.css
View File

@@ -466,6 +466,12 @@ body.dark-theme {
height: fit-content;
width: fit-content;
}
:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
pointer-events: none;
}
:host.disabled.disabled {
pointer-events: none;
}
.button {
display: flex;

2
projects/qd-design/src/lib/qd-button/qd-button.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;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;;;AC/CF;EACE;EACA;EACA;EACA;;;AAmBF;EHZE;EACA,gBGYiB;EHqCjB;EGnCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EC9CE;EDgDA;;ACgCA;EA5EA;EDgDE;;ACgCF;EAhFA;EDgDE;;ACiBF;EACE;EAlEF;EDqDE;;ACiBF;EAtEA;EDqDE;;ACEF;EAvDA;ED0DE;;ACCF;EA3DA;ED0DE;;ACfF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACDA;EAhFA;EDqFE;;ACDF;EApFA;EDqFE;;AChBF;EACE;EAtEF;ED0FE;;AChBF;EA1EA;ED0FE;;AC/BF;EA3DA;ED+FE;;AChCF;EA/DA;ED+FE;;AChDF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AClCA;EDqCE;EACA;;AClCF;EDiCE;EACA;;ACjDF;EACE;EDoDA;EACA;;ACjDF;EDgDE;EACA;;AChEF;EDoEE;EACA;;ACjEF;EDgEE;EACA;;ACjFF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACpEA;EDuEE;;ACnEF;EDmEE;;AClFF;EACE;EDqFA;;ACjFF;EDiFE;;AChGF;EDoGE;;AChGF;EDgGE;;AChHF;EACE;EDmHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8GA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACpGA;EDuGE;;ACnGF;EDmGE;;AClHF;EACE;EDqHA;;ACjHF;EDiHE;;AChIF;EDoIE;;AChIF;EDgIE;;AChJF;EACE;EDmJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8IA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0LF;EAEE;;AAGF;EAEE","file":"qd-button.css"}
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;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;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;ECpDE;EDsDA;;AC0BA;EA5EA;EDsDE;;AC0BF;EAhFA;EDsDE;;ACWF;EACE;EAlEF;ED2DE;;ACWF;EAtEA;ED2DE;;ACJF;EAvDA;EDgEE;;ACLF;EA3DA;EDgEE;;ACrBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACPA;EAhFA;ED2FE;;ACPF;EApFA;ED2FE;;ACtBF;EACE;EAtEF;EDgGE;;ACtBF;EA1EA;EDgGE;;ACrCF;EA3DA;EDqGE;;ACtCF;EA/DA;EDqGE;;ACtDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxCA;ED2CE;EACA;;ACxCF;EDuCE;EACA;;ACvDF;EACE;ED0DA;EACA;;ACvDF;EDsDE;EACA;;ACtEF;ED0EE;EACA;;ACvEF;EDsEE;EACA;;ACvFF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;AC1EA;ED6EE;;ACzEF;EDyEE;;ACxFF;EACE;ED2FA;;ACvFF;EDuFE;;ACtGF;ED0GE;;ACtGF;EDsGE;;ACtHF;EACE;EDyHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AC1GA;ED6GE;;ACzGF;EDyGE;;ACxHF;EACE;ED2HA;;ACvHF;EDuHE;;ACtIF;ED0IE;;ACtIF;EDsIE;;ACtJF;EACE;EDyJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0LF;EAEE;;AAGF;EAEE","file":"qd-button.css"}

6
projects/qd-design/src/lib/qd-button/qd-button.scss
View File

@@ -5,6 +5,12 @@
background-color: transparent;
height: fit-content;
width: fit-content;
&.disabled {
@include qd.disabled {
}
}
}
@mixin button-disabled {

7
projects/qd-design/src/lib/qd-button/qd-button.ts
View File

@@ -7,6 +7,7 @@ import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
imports: [
QdIcon
],
standalone: true,
templateUrl: './qd-button.html',
styleUrl: './qd-button.scss',
hostDirectives: [
@@ -14,10 +15,12 @@ import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
directive: QdButtonVariantDirective,
inputs: ['variant']
}
]
],
host: {
'[class.disabled]': 'disabled()',
}
})
export class QdButton {
// Optional inputs
iconName = input<String>();
text = input<string | number>();
disabled = input<Boolean>(false);

750
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css Normal file
View File

@@ -0,0 +1,750 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
: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;
/* 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 - 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 - 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;
/* 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 - 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 - 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;
/* 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 - 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 - 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, .button-content, :host[data-variant=filled] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=text] .button .content {
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);
}
.scrollable-y {
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.height-100 {
height: 100%;
max-height: 100%;
min-height: 100%;
}
.height-100-vh {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
.width-100 {
max-width: 100%;
min-width: 100%;
width: 100%;
}
.width-100-vw {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
body {
--md-sys-color-primary: rgb(73 93 146);
--md-sys-color-surface-tint: rgb(73 93 146);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(218 225 255);
--md-sys-color-on-primary-container: rgb(49 69 120);
--md-sys-color-secondary: rgb(88 94 113);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(221 226 249);
--md-sys-color-on-secondary-container: rgb(65 70 89);
--md-sys-color-tertiary: rgb(115 84 113);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(255 214 249);
--md-sys-color-on-tertiary-container: rgb(90 61 88);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(147 0 10);
--md-sys-color-background: rgb(250 248 255);
--md-sys-color-on-background: rgb(26 27 33);
--md-sys-color-surface: rgb(250 248 255);
--md-sys-color-on-surface: rgb(26 27 33);
--md-sys-color-surface-variant: rgb(225 226 236);
--md-sys-color-on-surface-variant: rgb(69 70 79);
--md-sys-color-outline: rgb(117 118 128);
--md-sys-color-outline-variant: rgb(197 198 208);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(47 48 54);
--md-sys-color-inverse-on-surface: rgb(241 240 247);
--md-sys-color-inverse-primary: rgb(179 197 255);
--md-sys-color-primary-fixed: rgb(218 225 255);
--md-sys-color-on-primary-fixed: rgb(0 24 73);
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
--md-sys-color-secondary-fixed: rgb(221 226 249);
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
--md-sys-color-tertiary-fixed: rgb(255 214 249);
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
--md-sys-color-surface-dim: rgb(218 217 224);
--md-sys-color-surface-bright: rgb(250 248 255);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(244 243 250);
--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;
}
@media (prefers-color-scheme: dark) {
body:not(.light-theme) {
--md-sys-color-primary: rgb(179 197 255);
--md-sys-color-surface-tint: rgb(179 197 255);
--md-sys-color-on-primary: rgb(25 46 96);
--md-sys-color-primary-container: rgb(49 69 120);
--md-sys-color-on-primary-container: rgb(218 225 255);
--md-sys-color-secondary: rgb(193 198 221);
--md-sys-color-on-secondary: rgb(42 48 66);
--md-sys-color-secondary-container: rgb(65 70 89);
--md-sys-color-on-secondary-container: rgb(221 226 249);
--md-sys-color-tertiary: rgb(225 187 220);
--md-sys-color-on-tertiary: rgb(66 39 65);
--md-sys-color-tertiary-container: rgb(90 61 88);
--md-sys-color-on-tertiary-container: rgb(255 214 249);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(18 19 24);
--md-sys-color-on-background: rgb(227 226 233);
--md-sys-color-surface: rgb(18 19 24);
--md-sys-color-on-surface: rgb(227 226 233);
--md-sys-color-surface-variant: rgb(69 70 79);
--md-sys-color-on-surface-variant: rgb(197 198 208);
--md-sys-color-outline: rgb(143 144 154);
--md-sys-color-outline-variant: rgb(69 70 79);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(227 226 233);
--md-sys-color-inverse-on-surface: rgb(47 48 54);
--md-sys-color-inverse-primary: rgb(73 93 146);
--md-sys-color-primary-fixed: rgb(218 225 255);
--md-sys-color-on-primary-fixed: rgb(0 24 73);
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
--md-sys-color-secondary-fixed: rgb(221 226 249);
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
--md-sys-color-tertiary-fixed: rgb(255 214 249);
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
--md-sys-color-surface-dim: rgb(18 19 24);
--md-sys-color-surface-bright: rgb(56 57 63);
--md-sys-color-surface-container-lowest: rgb(13 14 19);
--md-sys-color-surface-container-low: rgb(26 27 33);
--md-sys-color-surface-container: rgb(30 31 37);
--md-sys-color-surface-container-high: rgb(41 42 47);
--md-sys-color-surface-container-highest: rgb(51 52 58);
}
}
body.dark-theme {
--md-sys-color-primary: rgb(179 197 255);
--md-sys-color-surface-tint: rgb(179 197 255);
--md-sys-color-on-primary: rgb(25 46 96);
--md-sys-color-primary-container: rgb(49 69 120);
--md-sys-color-on-primary-container: rgb(218 225 255);
--md-sys-color-secondary: rgb(193 198 221);
--md-sys-color-on-secondary: rgb(42 48 66);
--md-sys-color-secondary-container: rgb(65 70 89);
--md-sys-color-on-secondary-container: rgb(221 226 249);
--md-sys-color-tertiary: rgb(225 187 220);
--md-sys-color-on-tertiary: rgb(66 39 65);
--md-sys-color-tertiary-container: rgb(90 61 88);
--md-sys-color-on-tertiary-container: rgb(255 214 249);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(18 19 24);
--md-sys-color-on-background: rgb(227 226 233);
--md-sys-color-surface: rgb(18 19 24);
--md-sys-color-on-surface: rgb(227 226 233);
--md-sys-color-surface-variant: rgb(69 70 79);
--md-sys-color-on-surface-variant: rgb(197 198 208);
--md-sys-color-outline: rgb(143 144 154);
--md-sys-color-outline-variant: rgb(69 70 79);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(227 226 233);
--md-sys-color-inverse-on-surface: rgb(47 48 54);
--md-sys-color-inverse-primary: rgb(73 93 146);
--md-sys-color-primary-fixed: rgb(218 225 255);
--md-sys-color-on-primary-fixed: rgb(0 24 73);
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
--md-sys-color-secondary-fixed: rgb(221 226 249);
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
--md-sys-color-tertiary-fixed: rgb(255 214 249);
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
--md-sys-color-surface-dim: rgb(18 19 24);
--md-sys-color-surface-bright: rgb(56 57 63);
--md-sys-color-surface-container-lowest: rgb(13 14 19);
--md-sys-color-surface-container-low: rgb(26 27 33);
--md-sys-color-surface-container: rgb(30 31 37);
--md-sys-color-surface-container-high: rgb(41 42 47);
--md-sys-color-surface-container-highest: rgb(51 52 58);
}
:host {
display: flex;
background-color: transparent;
height: fit-content;
width: fit-content;
}
:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
pointer-events: none;
}
:host.disabled.disabled {
pointer-events: none;
}
.button {
display: flex;
flex-direction: row;
cursor: pointer;
background-color: transparent;
border: 1px solid transparent;
border-radius: 20px;
box-sizing: border-box;
height: 40px;
padding: 8px;
transition: all 200ms ease-in-out;
width: 40px;
}
.button-icon, :host[data-variant=text] .button .icon, :host[data-variant=outlined] .button .icon, :host[data-variant=filled-tonal] .button .icon, :host[data-variant=filled] .button .icon {
background-color: transparent;
height: 24px;
margin: auto;
padding: 0;
width: 24px;
}
.button-content, :host[data-variant=text] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=filled] .button .content {
background-color: transparent;
height: fit-content;
margin: auto 8px;
padding: 0;
}
:host[data-variant=filled] .button {
background-color: var(--md-sys-color-primary);
}
:host[data-variant=filled] .button:enabled:hover, :host[data-variant=filled] .button:hover {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
}
:host[data-variant=filled] .button.hover {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
}
:host[data-variant=filled] .button:enabled:focus-visible, :host[data-variant=filled] .button:focus-visible {
outline: none;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
}
:host[data-variant=filled] .button.focus {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
}
:host[data-variant=filled] .button:enabled:active, :host[data-variant=filled] .button:active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
}
:host[data-variant=filled] .button.active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
}
:host[data-variant=filled] .button:disabled, :host[data-variant=filled] .button:disabled:active, :host[data-variant=filled] .button:disabled:hover, :host[data-variant=filled] .button:disabled:focus {
pointer-events: none;
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=filled] .button:disabled .icon, :host[data-variant=filled] .button:disabled:active .icon, :host[data-variant=filled] .button:disabled:hover .icon, :host[data-variant=filled] .button:disabled:focus .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled] .button:disabled .content, :host[data-variant=filled] .button:disabled:active .content, :host[data-variant=filled] .button:disabled:hover .content, :host[data-variant=filled] .button:disabled:focus .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled] .button.disabled {
pointer-events: none;
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=filled] .button.disabled .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled] .button.disabled .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled] .button .icon {
color: var(--md-sys-color-on-primary);
}
:host[data-variant=filled] .button .content {
color: var(--md-sys-color-on-primary);
}
:host[data-variant=filled-tonal] .button {
background-color: var(--md-sys-color-secondary-container);
}
:host[data-variant=filled-tonal] .button:enabled:hover, :host[data-variant=filled-tonal] .button:hover {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
box-shadow: var(--md-sys-elevation-1);
}
:host[data-variant=filled-tonal] .button.hover {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
box-shadow: var(--md-sys-elevation-1);
}
:host[data-variant=filled-tonal] .button:enabled:focus-visible, :host[data-variant=filled-tonal] .button:focus-visible {
outline: none;
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
box-shadow: var(--md-sys-elevation-1);
}
:host[data-variant=filled-tonal] .button.focus {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
box-shadow: var(--md-sys-elevation-1);
}
:host[data-variant=filled-tonal] .button:enabled:active, :host[data-variant=filled-tonal] .button:active {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
box-shadow: var(--md-sys-elevation-1);
}
:host[data-variant=filled-tonal] .button.active {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
box-shadow: var(--md-sys-elevation-1);
}
:host[data-variant=filled-tonal] .button:disabled, :host[data-variant=filled-tonal] .button:disabled:active, :host[data-variant=filled-tonal] .button:disabled:hover, :host[data-variant=filled-tonal] .button:disabled:focus {
pointer-events: none;
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=filled-tonal] .button:disabled .icon, :host[data-variant=filled-tonal] .button:disabled:active .icon, :host[data-variant=filled-tonal] .button:disabled:hover .icon, :host[data-variant=filled-tonal] .button:disabled:focus .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled-tonal] .button:disabled .content, :host[data-variant=filled-tonal] .button:disabled:active .content, :host[data-variant=filled-tonal] .button:disabled:hover .content, :host[data-variant=filled-tonal] .button:disabled:focus .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled-tonal] .button.disabled {
pointer-events: none;
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=filled-tonal] .button.disabled .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled-tonal] .button.disabled .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=filled-tonal] .button .icon {
color: var(--md-sys-color-on-secondary-container);
}
:host[data-variant=filled-tonal] .button .content {
color: var(--md-sys-color-on-secondary-container);
}
:host[data-variant=outlined] .button {
background-color: transparent;
border: 1px solid var(--md-sys-color-outline-variant);
}
:host[data-variant=outlined] .button:enabled:hover, :host[data-variant=outlined] .button:hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
:host[data-variant=outlined] .button.hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
:host[data-variant=outlined] .button:enabled:focus-visible, :host[data-variant=outlined] .button:focus-visible {
outline: none;
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=outlined] .button.focus {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=outlined] .button:enabled:active, :host[data-variant=outlined] .button:active {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=outlined] .button.active {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=outlined] .button:disabled, :host[data-variant=outlined] .button:disabled:active, :host[data-variant=outlined] .button:disabled:hover, :host[data-variant=outlined] .button:disabled:focus {
pointer-events: none;
background-color: transparent;
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=outlined] .button:disabled .icon, :host[data-variant=outlined] .button:disabled:active .icon, :host[data-variant=outlined] .button:disabled:hover .icon, :host[data-variant=outlined] .button:disabled:focus .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=outlined] .button:disabled .content, :host[data-variant=outlined] .button:disabled:active .content, :host[data-variant=outlined] .button:disabled:hover .content, :host[data-variant=outlined] .button:disabled:focus .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=outlined] .button.disabled {
pointer-events: none;
background-color: transparent;
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=outlined] .button.disabled .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=outlined] .button.disabled .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=outlined] .button .icon {
color: var(--md-sys-color-on-surface-variant);
}
:host[data-variant=outlined] .button .content {
color: var(--md-sys-color-on-surface-variant);
}
:host[data-variant=text] .button {
padding: 0 4px;
}
:host[data-variant=text] .button:enabled:hover, :host[data-variant=text] .button:hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
:host[data-variant=text] .button.hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
:host[data-variant=text] .button:enabled:focus-visible, :host[data-variant=text] .button:focus-visible {
outline: none;
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=text] .button.focus {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=text] .button:enabled:active, :host[data-variant=text] .button:active {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=text] .button.active {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
:host[data-variant=text] .button:disabled, :host[data-variant=text] .button:disabled:active, :host[data-variant=text] .button:disabled:hover, :host[data-variant=text] .button:disabled:focus {
pointer-events: none;
background-color: transparent;
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=text] .button:disabled .icon, :host[data-variant=text] .button:disabled:active .icon, :host[data-variant=text] .button:disabled:hover .icon, :host[data-variant=text] .button:disabled:focus .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=text] .button:disabled .content, :host[data-variant=text] .button:disabled:active .content, :host[data-variant=text] .button:disabled:hover .content, :host[data-variant=text] .button:disabled:focus .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=text] .button.disabled {
pointer-events: none;
background-color: transparent;
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
}
:host[data-variant=text] .button.disabled .icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=text] .button.disabled .content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
:host[data-variant=text] .button .icon {
color: var(--md-sys-color-primary);
}
:host[data-variant=text] .button .content {
color: var(--md-sys-color-primary);
}
/*# sourceMappingURL=qd-icon-button.css.map */

1
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-icon-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;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;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;;AC2BA;EAhFA;EDyDE;;AC2BF;EApFA;EDyDE;;ACYF;EACE;EAtEF;ED8DE;;ACYF;EA1EA;ED8DE;;ACHF;EA3DA;EDmEE;;ACJF;EA/DA;EDmEE;;ACpBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAuDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACNA;EDSE;EACA;;ACNF;EDKE;EACA;;ACrBF;EACE;EDwBA;EACA;;ACrBF;EDoBE;EACA;;ACpCF;EDwCE;EACA;;ACrCF;EDoCE;EACA;;ACrDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACxCA;ED2CE;;ACvCF;EDuCE;;ACtDF;EACE;EDyDA;;ACrDF;EDqDE;;ACpEF;EDwEE;;ACpEF;EDoEE;;ACpFF;EACE;EDuFA;EACA;EAhIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDkFA;EACA;EAhIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyHF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxEA;ED2EE;;ACvEF;EDuEE;;ACtFF;EACE;EDyFA;;ACrFF;EDqFE;;ACpGF;EDwGE;;ACpGF;EDoGE;;ACpHF;EACE;EDuHA;EA/JF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDkHA;EA/JF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwJF;EAEE;;AAGF;EAEE","file":"qd-icon-button.css"}

8
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.html Normal file
View File

@@ -0,0 +1,8 @@
<button [class]="'button'"
[disabled]="disabled()"
[type]="type()">
<qd-icon [iconName]="iconName()!"
[size]="24"
class="icon">
</qd-icon>
</button>

189
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.scss Normal file
View File

@@ -0,0 +1,189 @@
@use '../../styles/qd_design_system' as qd;
:host {
display: flex;
background-color: transparent;
height: fit-content;
width: fit-content;
&.disabled {
@include qd.disabled {
}
}
}
@mixin button-disabled {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
cursor: default;
box-shadow: none;
.icon {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
.content {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
background: transparent;
}
}
.button {
@include qd.flex(row);
@include qd.clickable;
background-color: transparent;
border: 1px solid transparent;
border-radius: 20px;
box-sizing: border-box;
height: 40px;
padding: 8px;
transition: all 200ms ease-in-out;
width: 40px;
&-icon {
background-color: transparent;
height: 24px;
margin: auto;
padding: 0;
width: 24px;
}
&-content {
@extend .label-large;
background-color: transparent;
height: fit-content;
margin: auto 8px;
padding: 0;
}
}
:host[data-variant='filled'] .button {
background-color: var(--md-sys-color-primary);
@include qd.hover {
@include qd.elevation-1;
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
}
@include qd.focus {
@include qd.elevation-1;
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
}
@include qd.active {
@include qd.elevation-1;
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
}
@include qd.disabled {
@include button-disabled;
}
.icon {
@extend .button-icon;
color: var(--md-sys-color-on-primary);
}
.content {
@extend .button-content;
color: var(--md-sys-color-on-primary);
}
}
:host[data-variant='filled-tonal'] .button {
background-color: var(--md-sys-color-secondary-container);
@include qd.hover {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
box-shadow: var(--md-sys-elevation-1);
}
@include qd.focus {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
box-shadow: var(--md-sys-elevation-1);
}
@include qd.active {
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
box-shadow: var(--md-sys-elevation-1);
}
@include qd.disabled {
@include button-disabled;
}
.icon {
@extend .button-icon;
color: var(--md-sys-color-on-secondary-container);
}
.content {
@extend .button-content;
color: var(--md-sys-color-on-secondary-container);
}
}
:host[data-variant='outlined'] .button {
background-color: transparent;
border: 1px solid var(--md-sys-color-outline-variant);
@include qd.hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
@include qd.focus {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
@include qd.active {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
@include qd.disabled {
background-color: transparent;
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
@include button-disabled;
}
.icon {
@extend .button-icon;
color: var(--md-sys-color-on-surface-variant);
}
.content {
@extend .button-content;
color: var(--md-sys-color-on-surface-variant);
}
}
:host[data-variant='text'] .button {
padding: 0 4px;
@include qd.hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
@include qd.focus {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
@include qd.active {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
@include qd.disabled {
background-color: transparent;
@include button-disabled;
}
.icon {
@extend .button-icon;
color: var(--md-sys-color-primary);
}
.content {
@extend .button-content;
color: var(--md-sys-color-primary);
}
}

23
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { QdIconButton } from './qd-icon-button';
describe('QdIconButton', () => {
let component: QdIconButton;
let fixture: ComponentFixture<QdIconButton>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [QdIconButton]
})
.compileComponents();
fixture = TestBed.createComponent(QdIconButton);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

28
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.ts Normal file
View File

@@ -0,0 +1,28 @@
import {Component, input} from '@angular/core';
import {QdIcon} from '../qd-icon/qd-icon';
import {QdIconButtonVariantDirective} from '../../directives/qd-icon-button-variant';
@Component({
selector: 'qd-icon-button',
imports: [
QdIcon
],
templateUrl: './qd-icon-button.html',
styleUrl: './qd-icon-button.scss',
standalone: true,
hostDirectives: [
{
directive: QdIconButtonVariantDirective,
inputs: ['variant']
}
],
host: {
'[class.disabled]': 'disabled()',
}
})
export class QdIconButton {
iconName = input<String>();
disabled = input<Boolean>(false);
type = input<'button' | 'submit' | 'reset'>('button');
}

1
projects/qd-design/src/lib/qd-icon/qd-icon.ts
View File

@@ -5,6 +5,7 @@ import {NgStyle} from '@angular/common';
selector: 'qd-icon',
imports: [NgStyle],
templateUrl: './qd-icon.html',
standalone: true,
styleUrl: './qd-icon.scss'
})
export class QdIcon {