yudu-component-kit 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, ViewEncapsulation, Component, Injectable } from '@angular/core';
|
|
3
|
+
import { input, ViewEncapsulation, Component, Injectable, signal } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
var YdBtnSize;
|
|
6
6
|
(function (YdBtnSize) {
|
|
@@ -27,7 +27,7 @@ class YdButton {
|
|
|
27
27
|
transform: (value) => typeof value === 'string' ? value === '' : value
|
|
28
28
|
}]));
|
|
29
29
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: YdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: YdButton, isStandalone: true, selector: "yd-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullSize: { classPropertyName: "fullSize", publicName: "fullSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.pointer-events--none": "disabled()", "class.w--100": "fullSize()" }, classAttribute: "yd-btn__container" }, ngImport: i0, template: "<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>", styles: ["*{--font-family-primary:\"Roboto\", sans-serif;--font-size-h1:4em;--font-size-h2:3.75em;--font-size-h3:3em;--font-size-h4:2.125em;--font-size-h5:1.5em;--font-size-h6:1.3125em;--font-size-b1:1em;--font-size-b2:.875em;--font-size-c1:.75em;--font-size-c2:.625em;--font-size-c3:.5em}*{--spacing-3xs:.125rem;--spacing-2xs:.25rem;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:3rem;--spacing-xl:4rem;--spacing-2xl:6.5rem;--spacing-blocks:1.25rem;--radius-0:.25rem;--radius-minimal:.5rem;--radius-rounded:1rem;--radius-full:10rem;--border-xs:.0625rem;--border-sm:.0781rem;--border-md:.0938rem;--border-lg:.125rem;--border-xl:.25rem}.theme--dark{--yd-color-text-primary:#eeeeee;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#4F4F4F;--yd-color-text-quaternary:#AFAFAF;--yd-color-surface-primary:#0B0C0C;--yd-color-surface-secondary:#151718;--yd-color-surface-tertiary:#1b1d1f;--yd-color-surface-quaternary:#2b2b2b;--yd-color-surface-quinary:#eeeeee;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#2b2b2b;--yd-color-border-tertiary:#2b2b2b;--yd-color-border-quaternary:#1b1d1f;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#1e6091;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#61a5c2;--yd-color-text-info-secondary:#468faf;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#0d2c38;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#1a4b5f;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#468faf;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#ffd4d1;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#D92D20;--yd-color-surface-danger-secondary:#520b06;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#FFF8E1;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#ad5100;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#dafff3;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#053c26;--yd-color-border-success-primary:#079455;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#085D3A;--yd-color-border-success-quaternary:#074D31;--yd-chip-color-surface-primary:#151718;--yd-chip-color-primary-text-default:#eeeeee;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#1b1d1f;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#C6C6C6;--yd-btn-color-secondary-text-hover:#C6C6C6;--yd-btn-color-secondary-text-active:#AFAFAF;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#151718;--yd-btn-color-secondary-surface-active:#0B0C0C;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#2b2b2b;--yd-btn-color-secondary-border-hover:#4F4F4F;--yd-btn-color-secondary-border-active:#1b1d1f;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#DDDDDD;--yd-btn-color-tertiary-text-default:#C6C6C6;--yd-btn-color-tertiary-text-hover:#C6C6C6;--yd-btn-color-tertiary-text-active:#AFAFAF;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#1b1d1f;--yd-btn-color-tertiary-surface-active:#0B0C0C;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#DDDDDD}.theme--light{--yd-color-text-primary:#1b1d1f;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#eeeeee;--yd-color-text-quaternary:#4F4F4F;--yd-color-surface-primary:#eeeeee;--yd-color-surface-secondary:#F9F9F9;--yd-color-surface-tertiary:#eeeeee;--yd-color-surface-quaternary:#C6C6C6;--yd-color-surface-quinary:#1b1d1f;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#C6C6C6;--yd-color-border-tertiary:#DDDDDD;--yd-color-border-quaternary:#eeeeee;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#76c893;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#468faf;--yd-color-text-info-secondary:#1a4b5f;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#dbf6ff;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#468faf;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#61a5c2;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#D92D20;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#F04438;--yd-color-surface-danger-secondary:#ffd4d1;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#DC6803;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#FFF8E1;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#085D3A;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#dafff3;--yd-color-border-success-primary:#085D3A;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#beffe2;--yd-color-border-success-quaternary:#dafff3;--yd-chip-color-surface-primary:#DDDDDD;--yd-chip-color-primary-text-default:#0B0C0C;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#C6C6C6;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#1b1d1f;--yd-btn-color-secondary-text-hover:#1b1d1f;--yd-btn-color-secondary-text-active:#0B0C0C;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#DDDDDD;--yd-btn-color-secondary-surface-active:#AFAFAF;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#C6C6C6;--yd-btn-color-secondary-border-hover:#2b2b2b;--yd-btn-color-secondary-border-active:#AFAFAF;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#89c2d9;--yd-btn-color-tertiary-text-default:#1b1d1f;--yd-btn-color-tertiary-text-hover:#2b2b2b;--yd-btn-color-tertiary-text-active:#0B0C0C;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#DDDDDD;--yd-btn-color-tertiary-surface-active:#C6C6C6;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#89c2d9}*{color:var(--yd-color-text-primary);font-family:var(--font-family-primary);margin:0;padding:0;transition:font-size .2s ease-in-out;transition:background-color .2s ease-in-out;line-height:140%;box-sizing:border-box}* *::-webkit-scrollbar{height:0;width:0}* body{background-color:var(--yd-color-surface-primary)}* p,* a,* li{transition:font-size .2s ease-in-out}* a,* ul{text-decoration:none}* ::marker{color:transparent}.font__color--primary{color:var(--yd-color-text-primary)}.font__color--secondary{color:var(--yd-color-text-secondary)}.font__color--tertiary{color:var(--yd-color-text-tertiary)}.font__color--quaternary{color:var(--yd-color-text-quaternary)}.font__color--link{color:var(--yd-color-text-info-primary)}.font__color--danger{color:var(--yd-color-text-danger-primary)}.font__color--brand-primary{color:var(--yd-color-text-brand-primary)}.font__color--brand-secondary{color:var(--yd-color-text-brand-secondary)}.font__size--h1{font-size:var(--font-size-h1)}.font__size--h2{font-size:var(--font-size-h2)}.font__size--h3{font-size:var(--font-size-h3)}.font__size--h4{font-size:var(--font-size-h4)}.font__size--h5{font-size:var(--font-size-h5)}.font__size--h6{font-size:var(--font-size-h6)}.font__size--b1{font-size:var(--font-size-b1)}.font__size--b2{font-size:var(--font-size-b2)}.font__size--c1{font-size:var(--font-size-c1)}.font__size--c2{font-size:var(--font-size-c2)}.font__size--c3{font-size:var(--font-size-c3)}.font__size--small{font-size:var(--font-size-c1)}.font__size--normal{font-size:var(--font-size-b2)}.font__size--large{font-size:var(--font-size-b1)}.font__weight--regular{font-weight:400}.font__weight--medium{font-weight:500}.font__weight--semibold{font-weight:600}.font__weight--bold{font-weight:700}.font__style--italic{font-style:italic}.font__decoration--underline{text-decoration:underline}@media screen and (max-width: 480px){.font__size--small{font-size:var(--font-size-c2)}.font__size--normal{font-size:var(--font-size-c1)}.font__size--large{font-size:var(--font-size-b2)}}.z-index-1{z-index:1}.pointer-events--none{pointer-events:none}.w--20px{width:1.25rem}.w--100{width:100%}.w--fit-content{width:fit-content}.cursor--pointer{cursor:pointer}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transition--bg{transition:background-color .2s ease-in-out}.display--none{display:none}.yd-btn__container{position:relative}.yd-btn__container .yd-btn{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;gap:var(--spacing-xs);border-radius:var(--radius-minimal);cursor:pointer;font-weight:500;white-space:nowrap;text-overflow:ellipsis;border-style:solid}.yd-btn__container .yd-btn.small{padding:var(--spacing-xs);font-size:var(--font-size-c1)}.yd-btn__container .yd-btn.normal{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-b2)}.yd-btn__container .yd-btn.large{padding:var(--spacing-sm);font-size:var(--font-size-b1)}.yd-btn__container .yd-btn img{width:.85rem;height:.85rem}.yd-btn__container .yd-btn.w--100{width:100%}.yd-btn__container .yd-btn.yd-btn__primary{background-color:var(--yd-btn-color-primary-surface-default);color:var(--yd-btn-color-primary-text-default);border-width:var(--border-xs);border-color:var(--yd-btn-color-primary-border-default)}.yd-btn__container .yd-btn.yd-btn__primary:hover{background-color:var(--yd-btn-color-primary-surface-hover);color:var(--yd-btn-color-primary-text-hover);border-color:var(--yd-btn-color-primary-border-hover)}.yd-btn__container .yd-btn.yd-btn__primary:active{background-color:var(--yd-btn-color-primary-surface-active);color:var(--yd-btn-color-primary-text-active);border-color:var(--yd-btn-color-primary-border-active)}.yd-btn__container .yd-btn.yd-btn__primary.btn__disabled{background-color:var(--yd-btn-color-primary-surface-disabled);color:var(--yd-btn-color-primary-text-disabled);border-color:var(--yd-btn-color-primary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__primary:focus-visible{outline-color:var(--yd-btn-color-primary-outline-focus);outline-width:var(--border-lg)}.yd-btn__container .yd-btn.yd-btn__secondary{background-color:var(--yd-btn-color-secondary-surface-default);color:var(--yd-btn-color-secondary-text-default);border-color:var(--yd-btn-color-secondary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__secondary:hover{background-color:var(--yd-btn-color-secondary-surface-hover);color:var(--yd-btn-color-secondary-text-hover);border-color:var(--yd-btn-color-secondary-border-hover)}.yd-btn__container .yd-btn.yd-btn__secondary:active{background-color:var(--yd-btn-color-secondary-surface-active);color:var(--yd-btn-color-secondary-text-active);border-color:var(--yd-btn-color-secondary-border-active)}.yd-btn__container .yd-btn.yd-btn__secondary.yd-btn__disabled{background-color:var(--yd-btn-color-secondary-surface-disabled);color:var(--yd-btn-color-secondary-text-disabled);border-color:var(--yd-btn-color-secondary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__secondary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-secondary-outline-focus)}.yd-btn__container .yd-btn.yd-btn__tertiary{background-color:var(--yd-btn-color-tertiary-surface-default);color:var(--yd-btn-color-tertiary-text-default);border-color:var(--yd-btn-color-tertiary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__tertiary:hover{background-color:var(--yd-btn-color-tertiary-surface-hover);color:var(--yd-btn-color-tertiary-text-hover);border-color:var(--yd-btn-color-tertiary-border-hover)}.yd-btn__container .yd-btn.yd-btn__tertiary:active{background-color:var(--yd-btn-color-tertiary-surface-active);color:var(--yd-btn-color-tertiary-text-active);border-color:var(--yd-btn-color-tertiary-border-active)}.yd-btn__container .yd-btn.yd-btn__tertiary.yd-btn__disabled{background-color:var(--yd-btn-color-tertiary-surface-disabled);color:var(--yd-btn-color-tertiary-text-disabled);border-color:var(--yd-btn-color-tertiary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__tertiary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-tertiary-outline-focus)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: YdButton, isStandalone: true, selector: "yd-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullSize: { classPropertyName: "fullSize", publicName: "fullSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.pointer-events--none": "disabled()", "class.w--100": "fullSize()" }, classAttribute: "yd-btn__container" }, ngImport: i0, template: "<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>", styles: [".yd-btn__container{position:relative}.yd-btn__container .yd-btn{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;gap:var(--spacing-xs);border-radius:var(--radius-minimal);cursor:pointer;font-weight:500;white-space:nowrap;text-overflow:ellipsis;border-style:solid}.yd-btn__container .yd-btn.small{padding:var(--spacing-xs);font-size:var(--font-size-c1)}.yd-btn__container .yd-btn.normal{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-b2)}.yd-btn__container .yd-btn.large{padding:var(--spacing-sm);font-size:var(--font-size-b1)}.yd-btn__container .yd-btn img{width:.85rem;height:.85rem}.yd-btn__container .yd-btn.w--100{width:100%}.yd-btn__container .yd-btn.yd-btn__primary{background-color:var(--yd-btn-color-primary-surface-default);color:var(--yd-btn-color-primary-text-default);border-width:var(--border-xs);border-color:var(--yd-btn-color-primary-border-default)}.yd-btn__container .yd-btn.yd-btn__primary:hover{background-color:var(--yd-btn-color-primary-surface-hover);color:var(--yd-btn-color-primary-text-hover);border-color:var(--yd-btn-color-primary-border-hover)}.yd-btn__container .yd-btn.yd-btn__primary:active{background-color:var(--yd-btn-color-primary-surface-active);color:var(--yd-btn-color-primary-text-active);border-color:var(--yd-btn-color-primary-border-active)}.yd-btn__container .yd-btn.yd-btn__primary.btn__disabled{background-color:var(--yd-btn-color-primary-surface-disabled);color:var(--yd-btn-color-primary-text-disabled);border-color:var(--yd-btn-color-primary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__primary:focus-visible{outline-color:var(--yd-btn-color-primary-outline-focus);outline-width:var(--border-lg)}.yd-btn__container .yd-btn.yd-btn__secondary{background-color:var(--yd-btn-color-secondary-surface-default);color:var(--yd-btn-color-secondary-text-default);border-color:var(--yd-btn-color-secondary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__secondary:hover{background-color:var(--yd-btn-color-secondary-surface-hover);color:var(--yd-btn-color-secondary-text-hover);border-color:var(--yd-btn-color-secondary-border-hover)}.yd-btn__container .yd-btn.yd-btn__secondary:active{background-color:var(--yd-btn-color-secondary-surface-active);color:var(--yd-btn-color-secondary-text-active);border-color:var(--yd-btn-color-secondary-border-active)}.yd-btn__container .yd-btn.yd-btn__secondary.yd-btn__disabled{background-color:var(--yd-btn-color-secondary-surface-disabled);color:var(--yd-btn-color-secondary-text-disabled);border-color:var(--yd-btn-color-secondary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__secondary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-secondary-outline-focus)}.yd-btn__container .yd-btn.yd-btn__tertiary{background-color:var(--yd-btn-color-tertiary-surface-default);color:var(--yd-btn-color-tertiary-text-default);border-color:var(--yd-btn-color-tertiary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__tertiary:hover{background-color:var(--yd-btn-color-tertiary-surface-hover);color:var(--yd-btn-color-tertiary-text-hover);border-color:var(--yd-btn-color-tertiary-border-hover)}.yd-btn__container .yd-btn.yd-btn__tertiary:active{background-color:var(--yd-btn-color-tertiary-surface-active);color:var(--yd-btn-color-tertiary-text-active);border-color:var(--yd-btn-color-tertiary-border-active)}.yd-btn__container .yd-btn.yd-btn__tertiary.yd-btn__disabled{background-color:var(--yd-btn-color-tertiary-surface-disabled);color:var(--yd-btn-color-tertiary-text-disabled);border-color:var(--yd-btn-color-tertiary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__tertiary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-tertiary-outline-focus)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: YdButton, decorators: [{
|
|
33
33
|
type: Component,
|
|
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
35
35
|
'[class.pointer-events--none]': 'disabled()',
|
|
36
36
|
'[class.w--100]': 'fullSize()',
|
|
37
37
|
'class': 'yd-btn__container',
|
|
38
|
-
}, encapsulation: ViewEncapsulation.None, template: "<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>", styles: ["*{--font-family-primary:\"Roboto\", sans-serif;--font-size-h1:4em;--font-size-h2:3.75em;--font-size-h3:3em;--font-size-h4:2.125em;--font-size-h5:1.5em;--font-size-h6:1.3125em;--font-size-b1:1em;--font-size-b2:.875em;--font-size-c1:.75em;--font-size-c2:.625em;--font-size-c3:.5em}*{--spacing-3xs:.125rem;--spacing-2xs:.25rem;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:3rem;--spacing-xl:4rem;--spacing-2xl:6.5rem;--spacing-blocks:1.25rem;--radius-0:.25rem;--radius-minimal:.5rem;--radius-rounded:1rem;--radius-full:10rem;--border-xs:.0625rem;--border-sm:.0781rem;--border-md:.0938rem;--border-lg:.125rem;--border-xl:.25rem}.theme--dark{--yd-color-text-primary:#eeeeee;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#4F4F4F;--yd-color-text-quaternary:#AFAFAF;--yd-color-surface-primary:#0B0C0C;--yd-color-surface-secondary:#151718;--yd-color-surface-tertiary:#1b1d1f;--yd-color-surface-quaternary:#2b2b2b;--yd-color-surface-quinary:#eeeeee;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#2b2b2b;--yd-color-border-tertiary:#2b2b2b;--yd-color-border-quaternary:#1b1d1f;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#1e6091;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#61a5c2;--yd-color-text-info-secondary:#468faf;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#0d2c38;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#1a4b5f;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#468faf;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#ffd4d1;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#D92D20;--yd-color-surface-danger-secondary:#520b06;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#FFF8E1;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#ad5100;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#dafff3;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#053c26;--yd-color-border-success-primary:#079455;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#085D3A;--yd-color-border-success-quaternary:#074D31;--yd-chip-color-surface-primary:#151718;--yd-chip-color-primary-text-default:#eeeeee;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#1b1d1f;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#C6C6C6;--yd-btn-color-secondary-text-hover:#C6C6C6;--yd-btn-color-secondary-text-active:#AFAFAF;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#151718;--yd-btn-color-secondary-surface-active:#0B0C0C;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#2b2b2b;--yd-btn-color-secondary-border-hover:#4F4F4F;--yd-btn-color-secondary-border-active:#1b1d1f;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#DDDDDD;--yd-btn-color-tertiary-text-default:#C6C6C6;--yd-btn-color-tertiary-text-hover:#C6C6C6;--yd-btn-color-tertiary-text-active:#AFAFAF;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#1b1d1f;--yd-btn-color-tertiary-surface-active:#0B0C0C;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#DDDDDD}.theme--light{--yd-color-text-primary:#1b1d1f;--yd-color-text-secondary:#7F7F7F;--yd-color-text-tertiary:#eeeeee;--yd-color-text-quaternary:#4F4F4F;--yd-color-surface-primary:#eeeeee;--yd-color-surface-secondary:#F9F9F9;--yd-color-surface-tertiary:#eeeeee;--yd-color-surface-quaternary:#C6C6C6;--yd-color-surface-quinary:#1b1d1f;--yd-color-border-primary:#7F7F7F;--yd-color-border-secondary:#C6C6C6;--yd-color-border-tertiary:#DDDDDD;--yd-color-border-quaternary:#eeeeee;--yd-color-text-brand-primary:#1a759f;--yd-color-text-brand-secondary:#168aad;--yd-color-surface-brand-primary:#1a759f;--yd-color-surface-brand-secondary:#76c893;--yd-color-border-brand-primary:#1a759f;--yd-color-border-brand-secondary:#168aad;--yd-color-text-info-primary:#468faf;--yd-color-text-info-secondary:#1a4b5f;--yd-color-text-info-tertiary:#dbf6ff;--yd-color-surface-info-primary:#dbf6ff;--yd-color-surface-info-secondary:#a9d6e5;--yd-color-surface-info-tertiary:#61a5c2;--yd-color-surface-info-quaternary:#468faf;--yd-color-surface-info-quinary:#89c2d9;--yd-color-border-info-primary:#61a5c2;--yd-color-border-info-secondary:#1a4b5f;--yd-color-text-danger-primary:#D92D20;--yd-color-text-danger-secondary:#941c14;--yd-color-surface-danger-primary:#F04438;--yd-color-surface-danger-secondary:#ffd4d1;--yd-color-border-danger-primary:#F97066;--yd-color-border-danger-secondary:#D92D20;--yd-color-border-danger-tertiary:#941c14;--yd-color-text-warning-primary:#DC6803;--yd-color-surface-warning-primary:#FFB020;--yd-color-surface-warning-secondary:#FFF8E1;--yd-color-border-warning-primary:#F79009;--yd-color-border-warning-secondary:#FFB020;--yd-color-border-warning-tertiary:#DC6803;--yd-color-text-success-primary:#085D3A;--yd-color-surface-success-primary:#085D3A;--yd-color-surface-success-secondary:#dafff3;--yd-color-border-success-primary:#085D3A;--yd-color-border-success-secondary:#079455;--yd-color-border-success-tertiary:#beffe2;--yd-color-border-success-quaternary:#dafff3;--yd-chip-color-surface-primary:#DDDDDD;--yd-chip-color-primary-text-default:#0B0C0C;--yd-btn-color-primary-text-default:#F9F9F9;--yd-btn-color-primary-text-hover:#eeeeee;--yd-btn-color-primary-text-active:#F9F9F9;--yd-btn-color-primary-text-disabled:#4F4F4F;--yd-btn-color-primary-surface-default:#1a759f;--yd-btn-color-primary-surface-hover:#168aad;--yd-btn-color-primary-surface-active:#1e6091;--yd-btn-color-primary-surface-disabled:#C6C6C6;--yd-btn-color-primary-border-default:transparent;--yd-btn-color-primary-border-hover:transparent;--yd-btn-color-primary-border-active:transparent;--yd-btn-color-primary-border-disabled:transparent;--yd-btn-color-primary-outline-focus:#DDDDDD;--yd-btn-color-secondary-text-default:#1b1d1f;--yd-btn-color-secondary-text-hover:#1b1d1f;--yd-btn-color-secondary-text-active:#0B0C0C;--yd-btn-color-secondary-text-disabled:#4F4F4F;--yd-btn-color-secondary-surface-default:transparent;--yd-btn-color-secondary-surface-hover:#DDDDDD;--yd-btn-color-secondary-surface-active:#AFAFAF;--yd-btn-color-secondary-surface-disabled:transparent;--yd-btn-color-secondary-border-default:#C6C6C6;--yd-btn-color-secondary-border-hover:#2b2b2b;--yd-btn-color-secondary-border-active:#AFAFAF;--yd-btn-color-secondary-border-disabled:#4F4F4F;--yd-btn-color-secondary-outline-focus:#89c2d9;--yd-btn-color-tertiary-text-default:#1b1d1f;--yd-btn-color-tertiary-text-hover:#2b2b2b;--yd-btn-color-tertiary-text-active:#0B0C0C;--yd-btn-color-tertiary-text-disabled:#4F4F4F;--yd-btn-color-tertiary-surface-default:transparent;--yd-btn-color-tertiary-surface-hover:#DDDDDD;--yd-btn-color-tertiary-surface-active:#C6C6C6;--yd-btn-color-tertiary-surface-disabled:transparent;--yd-btn-color-tertiary-border-default:transparent;--yd-btn-color-tertiary-border-hover:transparent;--yd-btn-color-tertiary-border-active:transparent;--yd-btn-color-tertiary-border-disabled:transparent;--yd-btn-color-tertiary-outline-focus:#89c2d9}*{color:var(--yd-color-text-primary);font-family:var(--font-family-primary);margin:0;padding:0;transition:font-size .2s ease-in-out;transition:background-color .2s ease-in-out;line-height:140%;box-sizing:border-box}* *::-webkit-scrollbar{height:0;width:0}* body{background-color:var(--yd-color-surface-primary)}* p,* a,* li{transition:font-size .2s ease-in-out}* a,* ul{text-decoration:none}* ::marker{color:transparent}.font__color--primary{color:var(--yd-color-text-primary)}.font__color--secondary{color:var(--yd-color-text-secondary)}.font__color--tertiary{color:var(--yd-color-text-tertiary)}.font__color--quaternary{color:var(--yd-color-text-quaternary)}.font__color--link{color:var(--yd-color-text-info-primary)}.font__color--danger{color:var(--yd-color-text-danger-primary)}.font__color--brand-primary{color:var(--yd-color-text-brand-primary)}.font__color--brand-secondary{color:var(--yd-color-text-brand-secondary)}.font__size--h1{font-size:var(--font-size-h1)}.font__size--h2{font-size:var(--font-size-h2)}.font__size--h3{font-size:var(--font-size-h3)}.font__size--h4{font-size:var(--font-size-h4)}.font__size--h5{font-size:var(--font-size-h5)}.font__size--h6{font-size:var(--font-size-h6)}.font__size--b1{font-size:var(--font-size-b1)}.font__size--b2{font-size:var(--font-size-b2)}.font__size--c1{font-size:var(--font-size-c1)}.font__size--c2{font-size:var(--font-size-c2)}.font__size--c3{font-size:var(--font-size-c3)}.font__size--small{font-size:var(--font-size-c1)}.font__size--normal{font-size:var(--font-size-b2)}.font__size--large{font-size:var(--font-size-b1)}.font__weight--regular{font-weight:400}.font__weight--medium{font-weight:500}.font__weight--semibold{font-weight:600}.font__weight--bold{font-weight:700}.font__style--italic{font-style:italic}.font__decoration--underline{text-decoration:underline}@media screen and (max-width: 480px){.font__size--small{font-size:var(--font-size-c2)}.font__size--normal{font-size:var(--font-size-c1)}.font__size--large{font-size:var(--font-size-b2)}}.z-index-1{z-index:1}.pointer-events--none{pointer-events:none}.w--20px{width:1.25rem}.w--100{width:100%}.w--fit-content{width:fit-content}.cursor--pointer{cursor:pointer}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transition--bg{transition:background-color .2s ease-in-out}.display--none{display:none}.yd-btn__container{position:relative}.yd-btn__container .yd-btn{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;gap:var(--spacing-xs);border-radius:var(--radius-minimal);cursor:pointer;font-weight:500;white-space:nowrap;text-overflow:ellipsis;border-style:solid}.yd-btn__container .yd-btn.small{padding:var(--spacing-xs);font-size:var(--font-size-c1)}.yd-btn__container .yd-btn.normal{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-b2)}.yd-btn__container .yd-btn.large{padding:var(--spacing-sm);font-size:var(--font-size-b1)}.yd-btn__container .yd-btn img{width:.85rem;height:.85rem}.yd-btn__container .yd-btn.w--100{width:100%}.yd-btn__container .yd-btn.yd-btn__primary{background-color:var(--yd-btn-color-primary-surface-default);color:var(--yd-btn-color-primary-text-default);border-width:var(--border-xs);border-color:var(--yd-btn-color-primary-border-default)}.yd-btn__container .yd-btn.yd-btn__primary:hover{background-color:var(--yd-btn-color-primary-surface-hover);color:var(--yd-btn-color-primary-text-hover);border-color:var(--yd-btn-color-primary-border-hover)}.yd-btn__container .yd-btn.yd-btn__primary:active{background-color:var(--yd-btn-color-primary-surface-active);color:var(--yd-btn-color-primary-text-active);border-color:var(--yd-btn-color-primary-border-active)}.yd-btn__container .yd-btn.yd-btn__primary.btn__disabled{background-color:var(--yd-btn-color-primary-surface-disabled);color:var(--yd-btn-color-primary-text-disabled);border-color:var(--yd-btn-color-primary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__primary:focus-visible{outline-color:var(--yd-btn-color-primary-outline-focus);outline-width:var(--border-lg)}.yd-btn__container .yd-btn.yd-btn__secondary{background-color:var(--yd-btn-color-secondary-surface-default);color:var(--yd-btn-color-secondary-text-default);border-color:var(--yd-btn-color-secondary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__secondary:hover{background-color:var(--yd-btn-color-secondary-surface-hover);color:var(--yd-btn-color-secondary-text-hover);border-color:var(--yd-btn-color-secondary-border-hover)}.yd-btn__container .yd-btn.yd-btn__secondary:active{background-color:var(--yd-btn-color-secondary-surface-active);color:var(--yd-btn-color-secondary-text-active);border-color:var(--yd-btn-color-secondary-border-active)}.yd-btn__container .yd-btn.yd-btn__secondary.yd-btn__disabled{background-color:var(--yd-btn-color-secondary-surface-disabled);color:var(--yd-btn-color-secondary-text-disabled);border-color:var(--yd-btn-color-secondary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__secondary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-secondary-outline-focus)}.yd-btn__container .yd-btn.yd-btn__tertiary{background-color:var(--yd-btn-color-tertiary-surface-default);color:var(--yd-btn-color-tertiary-text-default);border-color:var(--yd-btn-color-tertiary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__tertiary:hover{background-color:var(--yd-btn-color-tertiary-surface-hover);color:var(--yd-btn-color-tertiary-text-hover);border-color:var(--yd-btn-color-tertiary-border-hover)}.yd-btn__container .yd-btn.yd-btn__tertiary:active{background-color:var(--yd-btn-color-tertiary-surface-active);color:var(--yd-btn-color-tertiary-text-active);border-color:var(--yd-btn-color-tertiary-border-active)}.yd-btn__container .yd-btn.yd-btn__tertiary.yd-btn__disabled{background-color:var(--yd-btn-color-tertiary-surface-disabled);color:var(--yd-btn-color-tertiary-text-disabled);border-color:var(--yd-btn-color-tertiary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__tertiary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-tertiary-outline-focus)}\n"] }]
|
|
38
|
+
}, encapsulation: ViewEncapsulation.None, template: "<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>", styles: [".yd-btn__container{position:relative}.yd-btn__container .yd-btn{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;gap:var(--spacing-xs);border-radius:var(--radius-minimal);cursor:pointer;font-weight:500;white-space:nowrap;text-overflow:ellipsis;border-style:solid}.yd-btn__container .yd-btn.small{padding:var(--spacing-xs);font-size:var(--font-size-c1)}.yd-btn__container .yd-btn.normal{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-b2)}.yd-btn__container .yd-btn.large{padding:var(--spacing-sm);font-size:var(--font-size-b1)}.yd-btn__container .yd-btn img{width:.85rem;height:.85rem}.yd-btn__container .yd-btn.w--100{width:100%}.yd-btn__container .yd-btn.yd-btn__primary{background-color:var(--yd-btn-color-primary-surface-default);color:var(--yd-btn-color-primary-text-default);border-width:var(--border-xs);border-color:var(--yd-btn-color-primary-border-default)}.yd-btn__container .yd-btn.yd-btn__primary:hover{background-color:var(--yd-btn-color-primary-surface-hover);color:var(--yd-btn-color-primary-text-hover);border-color:var(--yd-btn-color-primary-border-hover)}.yd-btn__container .yd-btn.yd-btn__primary:active{background-color:var(--yd-btn-color-primary-surface-active);color:var(--yd-btn-color-primary-text-active);border-color:var(--yd-btn-color-primary-border-active)}.yd-btn__container .yd-btn.yd-btn__primary.btn__disabled{background-color:var(--yd-btn-color-primary-surface-disabled);color:var(--yd-btn-color-primary-text-disabled);border-color:var(--yd-btn-color-primary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__primary:focus-visible{outline-color:var(--yd-btn-color-primary-outline-focus);outline-width:var(--border-lg)}.yd-btn__container .yd-btn.yd-btn__secondary{background-color:var(--yd-btn-color-secondary-surface-default);color:var(--yd-btn-color-secondary-text-default);border-color:var(--yd-btn-color-secondary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__secondary:hover{background-color:var(--yd-btn-color-secondary-surface-hover);color:var(--yd-btn-color-secondary-text-hover);border-color:var(--yd-btn-color-secondary-border-hover)}.yd-btn__container .yd-btn.yd-btn__secondary:active{background-color:var(--yd-btn-color-secondary-surface-active);color:var(--yd-btn-color-secondary-text-active);border-color:var(--yd-btn-color-secondary-border-active)}.yd-btn__container .yd-btn.yd-btn__secondary.yd-btn__disabled{background-color:var(--yd-btn-color-secondary-surface-disabled);color:var(--yd-btn-color-secondary-text-disabled);border-color:var(--yd-btn-color-secondary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__secondary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-secondary-outline-focus)}.yd-btn__container .yd-btn.yd-btn__tertiary{background-color:var(--yd-btn-color-tertiary-surface-default);color:var(--yd-btn-color-tertiary-text-default);border-color:var(--yd-btn-color-tertiary-border-default);border-width:var(--border-xs)}.yd-btn__container .yd-btn.yd-btn__tertiary:hover{background-color:var(--yd-btn-color-tertiary-surface-hover);color:var(--yd-btn-color-tertiary-text-hover);border-color:var(--yd-btn-color-tertiary-border-hover)}.yd-btn__container .yd-btn.yd-btn__tertiary:active{background-color:var(--yd-btn-color-tertiary-surface-active);color:var(--yd-btn-color-tertiary-text-active);border-color:var(--yd-btn-color-tertiary-border-active)}.yd-btn__container .yd-btn.yd-btn__tertiary.yd-btn__disabled{background-color:var(--yd-btn-color-tertiary-surface-disabled);color:var(--yd-btn-color-tertiary-text-disabled);border-color:var(--yd-btn-color-tertiary-border-disabled);opacity:.3}.yd-btn__container .yd-btn.yd-btn__tertiary:focus-visible{outline-width:var(--border-lg);outline-color:var(--yd-btn-color-tertiary-outline-focus)}\n"] }]
|
|
39
39
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullSize", required: false }] }] } });
|
|
40
40
|
|
|
41
41
|
class LocalStorageStore {
|
|
@@ -66,6 +66,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
66
66
|
}]
|
|
67
67
|
}], ctorParameters: () => [] });
|
|
68
68
|
|
|
69
|
+
class Theme {
|
|
70
|
+
toggle = signal(false, ...(ngDevMode ? [{ debugName: "toggle" }] : []));
|
|
71
|
+
constructor() {
|
|
72
|
+
let theme = localStorage.getItem('theme');
|
|
73
|
+
this.toggle.set(theme == 'dark' ? true : false);
|
|
74
|
+
}
|
|
75
|
+
;
|
|
76
|
+
changeTheme(theme) {
|
|
77
|
+
theme = theme === 'light' ? 'light' : 'dark';
|
|
78
|
+
document.body.classList.toggle('theme--dark', theme === 'dark');
|
|
79
|
+
document.body.classList.toggle('theme--light', theme === 'light');
|
|
80
|
+
localStorage.setItem('theme', theme);
|
|
81
|
+
}
|
|
82
|
+
;
|
|
83
|
+
toggleTheme() {
|
|
84
|
+
this.toggle.set(!this.toggle());
|
|
85
|
+
const theme = this.toggle() ? 'dark' : 'light';
|
|
86
|
+
localStorage.setItem('theme', theme);
|
|
87
|
+
document.body.classList.toggle('theme--dark', this.toggle());
|
|
88
|
+
document.body.classList.toggle('theme--light', !this.toggle());
|
|
89
|
+
}
|
|
90
|
+
;
|
|
91
|
+
get GetTheme() {
|
|
92
|
+
let mode = localStorage.getItem('theme');
|
|
93
|
+
return mode;
|
|
94
|
+
}
|
|
95
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Theme, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
96
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Theme, providedIn: 'root' });
|
|
97
|
+
}
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Theme, decorators: [{
|
|
99
|
+
type: Injectable,
|
|
100
|
+
args: [{
|
|
101
|
+
providedIn: 'root',
|
|
102
|
+
}]
|
|
103
|
+
}], ctorParameters: () => [] });
|
|
104
|
+
|
|
69
105
|
/*
|
|
70
106
|
* Public API Surface of yudu-component-kit
|
|
71
107
|
*/
|
|
@@ -74,5 +110,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
74
110
|
* Generated bundle index. Do not edit.
|
|
75
111
|
*/
|
|
76
112
|
|
|
77
|
-
export { LocalStorageStore, YdBtnSize, YdBtnStyle, YdButton };
|
|
113
|
+
export { LocalStorageStore, Theme, YdBtnSize, YdBtnStyle, YdButton };
|
|
78
114
|
//# sourceMappingURL=yudu-component-kit.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yudu-component-kit.mjs","sources":["../../../projects/yudu-component-kit/src/lib/components/yd-button/yd-button.ts","../../../projects/yudu-component-kit/src/lib/components/yd-button/yd-button.html","../../../projects/yudu-component-kit/src/lib/core/services/local-storage-store.ts","../../../projects/yudu-component-kit/src/public-api.ts","../../../projects/yudu-component-kit/src/yudu-component-kit.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, input, ViewEncapsulation } from '@angular/core';\r\n\r\nexport enum YdBtnSize {\r\n small = 'small',\r\n normal = 'normal',\r\n large = 'large',\r\n};\r\n\r\nexport enum YdBtnStyle {\r\n primary = 'primary',\r\n secondary = 'secondary',\r\n tertiary = 'tertiary',\r\n};\r\n\r\n@Component({\r\n selector: 'yd-button',\r\n imports: [ NgClass ],\r\n templateUrl: './yd-button.html',\r\n styleUrl: '../../styles/
|
|
1
|
+
{"version":3,"file":"yudu-component-kit.mjs","sources":["../../../projects/yudu-component-kit/src/lib/components/yd-button/yd-button.ts","../../../projects/yudu-component-kit/src/lib/components/yd-button/yd-button.html","../../../projects/yudu-component-kit/src/lib/core/services/local-storage-store.ts","../../../projects/yudu-component-kit/src/lib/core/services/theme.ts","../../../projects/yudu-component-kit/src/public-api.ts","../../../projects/yudu-component-kit/src/yudu-component-kit.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, input, ViewEncapsulation } from '@angular/core';\r\n\r\nexport enum YdBtnSize {\r\n small = 'small',\r\n normal = 'normal',\r\n large = 'large',\r\n};\r\n\r\nexport enum YdBtnStyle {\r\n primary = 'primary',\r\n secondary = 'secondary',\r\n tertiary = 'tertiary',\r\n};\r\n\r\n@Component({\r\n selector: 'yd-button',\r\n imports: [ NgClass ],\r\n templateUrl: './yd-button.html',\r\n styleUrl: '../../styles/classes/yd-button.scss',\r\n host:{\r\n '[class.pointer-events--none]':'disabled()',\r\n '[class.w--100]':'fullSize()',\r\n 'class':'yd-btn__container',\r\n },\r\n encapsulation:ViewEncapsulation.None\r\n})\r\nexport class YdButton {\r\n public size = input.required<YdBtnSize>();\r\n public buttonStyle = input.required<YdBtnStyle>();\r\n public type = input<string>('text');\r\n \r\n public disabled = input(false, {\r\n transform:(value:boolean | string) => \r\n typeof value === 'string' ? value === '' : value\r\n });\r\n \r\n public fullSize = input(false, {\r\n transform:(value:boolean | string) => \r\n typeof value === 'string' ? value === '' : value\r\n });\r\n\r\n}\r\n","<button\r\n #buttonContainer\r\n [type]=\"type()\"\r\n class=\"yd-btn\"\r\n [class.yd-btn__primary]=\"buttonStyle() === 'primary'\"\r\n [class.yd-btn__secondary]=\"buttonStyle() === 'secondary'\"\r\n [class.yd-btn__tertiary]=\"buttonStyle() === 'tertiary'\"\r\n [class.w--100]=\"fullSize()\"\r\n [ngClass]=\"{\r\n 'small': size() === 'small',\r\n 'normal': size() === 'normal',\r\n 'large': size() === 'large',\r\n }\"\r\n >\r\n <ng-content></ng-content>\r\n</button>","import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class LocalStorageStore {\r\n\r\n constructor(){\r\n this.initLocalStorageStore();\r\n this.applyThemeClasses();\r\n }\r\n\r\n private initLocalStorageStore():void {\r\n const theme = localStorage.getItem('theme') || 'dark';\r\n if(!localStorage.getItem('theme')) localStorage.setItem('theme', theme); \r\n };\r\n\r\n private applyThemeClasses():void {\r\n const theme = localStorage.getItem('theme');\r\n\r\n if(theme) {\r\n document.body.classList.toggle('theme--dark', theme === 'dark');\r\n document.body.classList.toggle('theme--light', theme === 'light');\r\n }\r\n }\r\n \r\n}\r\n","import { Injectable, signal } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class Theme {\r\n public toggle = signal<boolean>(false);\r\n\r\n constructor() {\r\n let theme = localStorage.getItem('theme');\r\n this.toggle.set( theme == 'dark' ? true : false );\r\n };\r\n\r\n public changeTheme(theme:string):void {\r\n theme = theme === 'light' ? 'light' : 'dark';\r\n\r\n document.body.classList.toggle('theme--dark', theme === 'dark');\r\n document.body.classList.toggle('theme--light',theme === 'light');\r\n\r\n localStorage.setItem('theme', theme);\r\n };\r\n\r\n public toggleTheme():void {\r\n this.toggle.set( !this.toggle() );\r\n \r\n const theme = this.toggle() ? 'dark' : 'light';\r\n\r\n localStorage.setItem('theme', theme);\r\n\r\n document.body.classList.toggle('theme--dark', this.toggle());\r\n document.body.classList.toggle('theme--light', !this.toggle());\r\n };\r\n\r\n public get GetTheme():string | null {\r\n let mode = localStorage.getItem('theme');\r\n return mode;\r\n }\r\n}\r\n","/*\r\n * Public API Surface of yudu-component-kit\r\n */\r\n\r\nexport * from './lib/components/yd-button/yd-button';\r\n\r\nexport * from './lib/core/services/local-storage-store';\r\nexport * from './lib/core/services/theme';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -28,4 +28,14 @@ declare class LocalStorageStore {
|
|
|
28
28
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<LocalStorageStore>;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
declare class Theme {
|
|
32
|
+
toggle: _angular_core.WritableSignal<boolean>;
|
|
33
|
+
constructor();
|
|
34
|
+
changeTheme(theme: string): void;
|
|
35
|
+
toggleTheme(): void;
|
|
36
|
+
get GetTheme(): string | null;
|
|
37
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Theme, never>;
|
|
38
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<Theme>;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export { LocalStorageStore, Theme, YdBtnSize, YdBtnStyle, YdButton };
|