@crowdfarming/oliva-ds 1.52.0 → 1.53.0-rc.1
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.
|
@@ -3241,6 +3241,18 @@ class ChipsComponent {
|
|
|
3241
3241
|
options = input([]);
|
|
3242
3242
|
isSingleSelection = input(false);
|
|
3243
3243
|
optionsChange = output();
|
|
3244
|
+
onClick(event, option) {
|
|
3245
|
+
if (option.disabled) {
|
|
3246
|
+
event.preventDefault();
|
|
3247
|
+
event.stopPropagation();
|
|
3248
|
+
return;
|
|
3249
|
+
}
|
|
3250
|
+
if (option.href) {
|
|
3251
|
+
return;
|
|
3252
|
+
}
|
|
3253
|
+
event.preventDefault();
|
|
3254
|
+
this.toggle(option);
|
|
3255
|
+
}
|
|
3244
3256
|
toggle(option) {
|
|
3245
3257
|
const currentOptions = this.options();
|
|
3246
3258
|
const isSingle = this.isSingleSelection();
|
|
@@ -3259,11 +3271,11 @@ class ChipsComponent {
|
|
|
3259
3271
|
this.optionsChange.emit(updatedOptions);
|
|
3260
3272
|
}
|
|
3261
3273
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3262
|
-
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 <
|
|
3274
|
+
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"] }] });
|
|
3263
3275
|
}
|
|
3264
3276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
3265
3277
|
type: Component,
|
|
3266
|
-
args: [{ selector: 'lib-chips', template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <
|
|
3278
|
+
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"] }]
|
|
3267
3279
|
}] });
|
|
3268
3280
|
|
|
3269
3281
|
// TODO: Move to a constants file
|