@ifsworld/granite-components 6.1.2 → 6.2.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/esm2020/lib/badge/badge.component.mjs +2 -2
- package/esm2020/lib/checkbox/checkbox.component.mjs +2 -2
- package/esm2020/lib/chips/chip-list.component.mjs +2 -2
- package/esm2020/lib/chips/chip.component.mjs +4 -3
- package/esm2020/lib/radio-button/radio-button.component.mjs +2 -2
- package/esm2020/lib/toggle-switch/toggle-switch.component.mjs +2 -2
- package/fesm2015/ifsworld-granite-components.mjs +13 -12
- package/fesm2015/ifsworld-granite-components.mjs.map +1 -1
- package/fesm2020/ifsworld-granite-components.mjs +13 -12
- package/fesm2020/ifsworld-granite-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -414,13 +414,13 @@ class GraniteBadgeComponent {
|
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
416
|
GraniteBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
417
|
-
GraniteBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);
|
|
417
|
+
GraniteBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:.25rem;font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-s);padding-block:var(--granite-spacing-xs)}:host(.granite-badge-pill){border-radius:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
418
418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteBadgeComponent, decorators: [{
|
|
419
419
|
type: Component,
|
|
420
420
|
args: [{ selector: 'granite-badge', exportAs: 'graniteBadge', host: {
|
|
421
421
|
class: 'granite-badge',
|
|
422
422
|
'[class.granite-badge-pill]': 'pill',
|
|
423
|
-
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);
|
|
423
|
+
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:.25rem;font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-s);padding-block:var(--granite-spacing-xs)}:host(.granite-badge-pill){border-radius:1rem}\n"] }]
|
|
424
424
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { backgroundColor: [{
|
|
425
425
|
type: Input
|
|
426
426
|
}], color: [{
|
|
@@ -2200,7 +2200,7 @@ class GraniteToggleSwitchComponent {
|
|
|
2200
2200
|
}
|
|
2201
2201
|
}
|
|
2202
2202
|
GraniteToggleSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
|
|
2203
|
-
GraniteToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-s)}.granite-toggle-switch-text:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2203
|
+
GraniteToggleSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-s);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2204
2204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteToggleSwitchComponent, decorators: [{
|
|
2205
2205
|
type: Component,
|
|
2206
2206
|
args: [{ selector: 'granite-toggle-switch', exportAs: 'graniteToggleSwitch', host: {
|
|
@@ -2209,7 +2209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
2209
2209
|
'[class.granite-toggle-switch-disabled]': 'disabled',
|
|
2210
2210
|
'[class.granite-toggle-switch-readonly]': 'readonly',
|
|
2211
2211
|
'[class.granite-toggle-switch-label-before]': '_positionBefore',
|
|
2212
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-s)}.granite-toggle-switch-text:empty{display:none}\n"] }]
|
|
2212
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{box-shadow:0 0 0 .0625rem var(--granite-color-focus)}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-s);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}\n"] }]
|
|
2213
2213
|
}], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
|
|
2214
2214
|
type: Input
|
|
2215
2215
|
}], checked: [{
|
|
@@ -2318,7 +2318,7 @@ class GraniteRadioButtonComponent {
|
|
|
2318
2318
|
}
|
|
2319
2319
|
}
|
|
2320
2320
|
GraniteRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteRadioButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
|
|
2321
|
-
GraniteRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteRadioButtonComponent, selector: "granite-radio-button", inputs: { value: "value", id: "id", name: "name", checked: "checked", required: "required", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { radioChange: "radioChange", radioBlur: "radioBlur" }, host: { properties: { "class.granite-radio-button-disabled": "disabled", "class.granite-radio-button-label-before": "_positionBefore", "class.granite-radio-button-checked": "checked", "class.granite-radio-button-readonly": "readonly" }, classAttribute: "granite-radio-button" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteRadioButton"], usesOnChanges: true, ngImport: i0, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2321
|
+
GraniteRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteRadioButtonComponent, selector: "granite-radio-button", inputs: { value: "value", id: "id", name: "name", checked: "checked", required: "required", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { radioChange: "radioChange", radioBlur: "radioBlur" }, host: { properties: { "class.granite-radio-button-disabled": "disabled", "class.granite-radio-button-label-before": "_positionBefore", "class.granite-radio-button-checked": "checked", "class.granite-radio-button-readonly": "readonly" }, classAttribute: "granite-radio-button" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteRadioButton"], usesOnChanges: true, ngImport: i0, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl);margin-block-end:var(--granite-spacing-xs)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2322
2322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteRadioButtonComponent, decorators: [{
|
|
2323
2323
|
type: Component,
|
|
2324
2324
|
args: [{ selector: 'granite-radio-button', exportAs: 'graniteRadioButton', host: {
|
|
@@ -2327,7 +2327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
2327
2327
|
'[class.granite-radio-button-label-before]': '_positionBefore',
|
|
2328
2328
|
'[class.granite-radio-button-checked]': 'checked',
|
|
2329
2329
|
'[class.granite-radio-button-readonly]': 'readonly',
|
|
2330
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
|
|
2330
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl);margin-block-end:var(--granite-spacing-xs)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
|
|
2331
2331
|
}], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }]; }, propDecorators: { value: [{
|
|
2332
2332
|
type: Input
|
|
2333
2333
|
}], id: [{
|
|
@@ -2457,7 +2457,7 @@ class GraniteCheckboxComponent {
|
|
|
2457
2457
|
}
|
|
2458
2458
|
}
|
|
2459
2459
|
GraniteCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCheckboxComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
|
|
2460
|
-
GraniteCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteCheckboxComponent, selector: "granite-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", checkboxChange: "checkboxChange", checkboxBlur: "checkboxBlur" }, host: { properties: { "class.granite-checkbox-checked": "checked", "class.granite-checkbox-disabled": "disabled", "class.granite-checkbox-readonly": "readonly", "class.granite-checkbox-label-before": "_positionBefore" }, classAttribute: "granite-checkbox" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteCheckbox"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2460
|
+
GraniteCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteCheckboxComponent, selector: "granite-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", checkboxChange: "checkboxChange", checkboxBlur: "checkboxBlur" }, host: { properties: { "class.granite-checkbox-checked": "checked", "class.granite-checkbox-disabled": "disabled", "class.granite-checkbox-readonly": "readonly", "class.granite-checkbox-label-before": "_positionBefore" }, classAttribute: "granite-checkbox" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteCheckbox"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl);margin-block-end:var(--granite-spacing-xs)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-s);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2461
2461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteCheckboxComponent, decorators: [{
|
|
2462
2462
|
type: Component,
|
|
2463
2463
|
args: [{ selector: 'granite-checkbox', exportAs: 'graniteCheckbox', host: {
|
|
@@ -2466,7 +2466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
2466
2466
|
'[class.granite-checkbox-disabled]': 'disabled',
|
|
2467
2467
|
'[class.granite-checkbox-readonly]': 'readonly',
|
|
2468
2468
|
'[class.granite-checkbox-label-before]': '_positionBefore',
|
|
2469
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2469
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-xl);margin-block-end:var(--granite-spacing-xs)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-s);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2470
2470
|
}], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
|
|
2471
2471
|
type: Input
|
|
2472
2472
|
}], checked: [{
|
|
@@ -3028,7 +3028,7 @@ class GraniteChipComponent {
|
|
|
3028
3028
|
}
|
|
3029
3029
|
}
|
|
3030
3030
|
GraniteChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3031
|
-
GraniteChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-
|
|
3031
|
+
GraniteChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "class.granite-chip-removable": "!disabled && (removable || inputChip)", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-m);margin-inline-start:var(--granite-spacing-xxs);margin-inline-end:var(--granite-spacing-xxs);padding-top:var(--granite-spacing-s);padding-bottom:var(--granite-spacing-s);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-s)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-xs);padding-bottom:var(--granite-spacing-xs);padding-inline:var(--granite-spacing-s)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-xs);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-xs);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"], components: [{ type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
3032
3032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipComponent, decorators: [{
|
|
3033
3033
|
type: Component,
|
|
3034
3034
|
args: [{ selector: `granite-chip, granite-input-chip`, inputs: ['tabIndex'], exportAs: 'graniteChip', host: {
|
|
@@ -3038,6 +3038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
3038
3038
|
'[class.granite-chip-selected]': 'selected',
|
|
3039
3039
|
'[class.granite-chip-disabled]': 'disabled',
|
|
3040
3040
|
'[class.granite-chip-invalid]': 'invalid',
|
|
3041
|
+
'[class.granite-chip-removable]': '!disabled && (removable || inputChip)',
|
|
3041
3042
|
'[attr.tabindex]': 'disabled ? null : tabIndex',
|
|
3042
3043
|
'[attr.role]': 'role',
|
|
3043
3044
|
'[attr.disabled]': 'disabled || null',
|
|
@@ -3049,7 +3050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
3049
3050
|
'(keydown)': '_handleKeydown($event)',
|
|
3050
3051
|
'(blur)': '_blur()',
|
|
3051
3052
|
'(focus)': 'focus()',
|
|
3052
|
-
}, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-
|
|
3053
|
+
}, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-m);margin-inline-start:var(--granite-spacing-xxs);margin-inline-end:var(--granite-spacing-xxs);padding-top:var(--granite-spacing-s);padding-bottom:var(--granite-spacing-s);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-s)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-xs);padding-bottom:var(--granite-spacing-xs);padding-inline:var(--granite-spacing-s)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-xs);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-xs);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
|
|
3053
3054
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef, decorators: [{
|
|
3054
3055
|
type: Optional
|
|
3055
3056
|
}] }, { type: undefined, decorators: [{
|
|
@@ -3586,7 +3587,7 @@ class GraniteChipListComponent extends GraniteChipListBase {
|
|
|
3586
3587
|
}
|
|
3587
3588
|
}
|
|
3588
3589
|
GraniteChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i3$1.Directionality, optional: true }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3589
|
-
GraniteChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"] }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-
|
|
3590
|
+
GraniteChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"] }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-xs)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3590
3591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipListComponent, decorators: [{
|
|
3591
3592
|
type: Component,
|
|
3592
3593
|
args: [{ selector: 'granite-chip-list', template: `<ng-content></ng-content>`, exportAs: 'graniteChipList', host: {
|
|
@@ -3603,7 +3604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
3603
3604
|
'(focus)': 'focus()',
|
|
3604
3605
|
'(blur)': '_blur()',
|
|
3605
3606
|
'(keydown)': '_keydown($event)',
|
|
3606
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-
|
|
3607
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-xs)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
|
|
3607
3608
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3$1.Directionality, decorators: [{
|
|
3608
3609
|
type: Optional
|
|
3609
3610
|
}] }, { type: i2$1.NgForm, decorators: [{
|