@crowdfarming/oliva-ds 1.74.0-rc.5 → 1.74.0
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.
|
@@ -3325,11 +3325,11 @@ class ChipsComponent {
|
|
|
3325
3325
|
this.optionsChange.emit(updatedOptions);
|
|
3326
3326
|
}
|
|
3327
3327
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <a\n class=\"c-chip__label\"\n [ngClass]=\"{\n 'c-chip__label--disabled': option.disabled,\n 'c-chip__label--selected': !option.href && option.selected\n }\"\n [routerLink]=\"option.href ?? null\"\n [queryParams]=\"option.queryParams ?? null\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [attr.aria-pressed]=\"!option.href ? option.selected : null\"\n [attr.role]=\"!option.href ? 'button' : null\"\n (click)=\"onClick($event, option)\"\n >\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </a>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap;text-decoration:none}.c-chip__label:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label--disabled{background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed;pointer-events:none}.c-chip__label--selected{background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label--selected:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label--selected:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label--selected:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
3328
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <a\n class=\"c-chip__label\"\n [ngClass]=\"{\n 'c-chip__label--disabled': option.disabled,\n 'c-chip__label--selected': !option.href && option.selected\n }\"\n [routerLink]=\"option.href ?? null\"\n [queryParams]=\"option.queryParams ?? null\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [attr.aria-pressed]=\"!option.href ? option.selected : null\"\n [attr.role]=\"!option.href ? 'button' : null\"\n (click)=\"onClick($event, option)\"\n >\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </a>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap;text-decoration:none}.c-chip__label:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label--disabled{background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed;pointer-events:none}.c-chip__label--selected{background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label--selected:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover);color:var(--color-action-primary-selected-content-hover)}.c-chip__label--selected:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label--selected:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
3329
3329
|
}
|
|
3330
3330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
3331
3331
|
type: Component,
|
|
3332
|
-
args: [{ selector: 'lib-chips', imports: [NgClass, RouterLink], template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <a\n class=\"c-chip__label\"\n [ngClass]=\"{\n 'c-chip__label--disabled': option.disabled,\n 'c-chip__label--selected': !option.href && option.selected\n }\"\n [routerLink]=\"option.href ?? null\"\n [queryParams]=\"option.queryParams ?? null\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [attr.aria-pressed]=\"!option.href ? option.selected : null\"\n [attr.role]=\"!option.href ? 'button' : null\"\n (click)=\"onClick($event, option)\"\n >\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </a>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap;text-decoration:none}.c-chip__label:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label--disabled{background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed;pointer-events:none}.c-chip__label--selected{background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label--selected:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label--selected:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label--selected:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}\n"] }]
|
|
3332
|
+
args: [{ selector: 'lib-chips', imports: [NgClass, RouterLink], template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <a\n class=\"c-chip__label\"\n [ngClass]=\"{\n 'c-chip__label--disabled': option.disabled,\n 'c-chip__label--selected': !option.href && option.selected\n }\"\n [routerLink]=\"option.href ?? null\"\n [queryParams]=\"option.queryParams ?? null\"\n [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n [attr.aria-pressed]=\"!option.href ? option.selected : null\"\n [attr.role]=\"!option.href ? 'button' : null\"\n (click)=\"onClick($event, option)\"\n >\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </a>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap;text-decoration:none}.c-chip__label:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label--disabled{background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed;pointer-events:none}.c-chip__label--selected{background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label--selected:hover:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover);color:var(--color-action-primary-selected-content-hover)}.c-chip__label--selected:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label--selected:active:not(.c-chip__label--disabled){background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}\n"] }]
|
|
3333
3333
|
}] });
|
|
3334
3334
|
|
|
3335
3335
|
// TODO: Move to a constants file
|
|
@@ -7380,11 +7380,11 @@ class SwitchComponent {
|
|
|
7380
7380
|
this.checked.set(!this.checked());
|
|
7381
7381
|
}
|
|
7382
7382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n [textOptional]=\"optionalLabel()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }] });
|
|
7383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n [textOptional]=\"optionalLabel()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{flex-shrink:0;position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }] });
|
|
7384
7384
|
}
|
|
7385
7385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
7386
7386
|
type: Component,
|
|
7387
|
-
args: [{ selector: 'lib-switch', imports: [FormsModule, InputLabelComponent], template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n [textOptional]=\"optionalLabel()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"] }]
|
|
7387
|
+
args: [{ selector: 'lib-switch', imports: [FormsModule, InputLabelComponent], template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked()\"\n [class.c-switch--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label()\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [text]=\"label()\"\n [textOptional]=\"optionalLabel()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-switch{display:flex;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{flex-shrink:0;position:relative;width:44px;height:24px;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929a99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7d8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625b)}.c-switch--checked .c-switch__thumb{transform:translate(20px)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{cursor:not-allowed;background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}.c-switch--disabled .c-switch__track:hover{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"] }]
|
|
7388
7388
|
}] });
|
|
7389
7389
|
|
|
7390
7390
|
class TabsComponent {
|