cps-ui-kit 21.4.0 → 21.4.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.
package/fesm2022/cps-ui-kit.mjs
CHANGED
|
@@ -6294,7 +6294,7 @@ class CpsButtonToggleComponent {
|
|
|
6294
6294
|
return px / this._rootFontSizePx;
|
|
6295
6295
|
}
|
|
6296
6296
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", ariaLabel: "ariaLabel", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}:host .cps-btn-toggle-content-option:
|
|
6297
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", ariaLabel: "ariaLabel", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option:hover{background:var(--cps-color-highlight-hover);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:active{background:var(--cps-color-highlight-active);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:focus-visible:not(.is-selected):not(:active){background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option:focus-visible{z-index:1}:host .cps-btn-toggle-content-option:focus-visible{outline:none;position:relative}:host .cps-btn-toggle-content-option:focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-btn-toggle-content-option:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-btn-toggle-content-option:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-btn-toggle-content-option.is-selected{background:var(--cps-color-calm);color:#fff}:host .cps-btn-toggle-content-option:disabled{background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild);cursor:default}:host .cps-btn-toggle-content-option:disabled.is-selected{background:var(--cps-color-bg-disabled-selected);color:var(--cps-color-text-medium);opacity:1}:host .cps-btn-toggle-option-wrapper:first-child .cps-btn-toggle-content-option{border-radius:.25rem 0 0 .25rem}:host .cps-btn-toggle-option-wrapper:last-child .cps-btn-toggle-content-option{border-radius:0 .25rem .25rem 0}:host .cps-btn-toggle-content-option-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
6298
6298
|
}
|
|
6299
6299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
6300
6300
|
type: Component,
|
|
@@ -6304,7 +6304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
6304
6304
|
CpsInfoCircleComponent,
|
|
6305
6305
|
CpsIconComponent,
|
|
6306
6306
|
CpsTooltipDirective
|
|
6307
|
-
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}:host .cps-btn-toggle-content-option:
|
|
6307
|
+
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option:hover{background:var(--cps-color-highlight-hover);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:active{background:var(--cps-color-highlight-active);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:focus-visible:not(.is-selected):not(:active){background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option:focus-visible{z-index:1}:host .cps-btn-toggle-content-option:focus-visible{outline:none;position:relative}:host .cps-btn-toggle-content-option:focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-btn-toggle-content-option:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-btn-toggle-content-option:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-btn-toggle-content-option.is-selected{background:var(--cps-color-calm);color:#fff}:host .cps-btn-toggle-content-option:disabled{background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild);cursor:default}:host .cps-btn-toggle-content-option:disabled.is-selected{background:var(--cps-color-bg-disabled-selected);color:var(--cps-color-text-medium);opacity:1}:host .cps-btn-toggle-option-wrapper:first-child .cps-btn-toggle-content-option{border-radius:.25rem 0 0 .25rem}:host .cps-btn-toggle-option-wrapper:last-child .cps-btn-toggle-content-option{border-radius:0 .25rem .25rem 0}:host .cps-btn-toggle-content-option-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
6308
6308
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
6309
6309
|
type: Self
|
|
6310
6310
|
}, {
|