@carbon/web-components 2.0.0-alpha.0 → 2.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -19
- package/custom-elements.json +474 -200
- package/es/components/accordion/accordion-item-skeleton.d.ts +20 -0
- package/es/components/accordion/accordion-item-skeleton.d.ts.map +1 -0
- package/es/components/accordion/accordion-item-skeleton.js +60 -0
- package/es/components/accordion/accordion-item-skeleton.js.map +1 -0
- package/es/components/accordion/accordion-item.d.ts +5 -4
- package/es/components/accordion/accordion-item.d.ts.map +1 -1
- package/es/components/accordion/accordion-item.js +24 -9
- package/es/components/accordion/accordion-item.js.map +1 -1
- package/es/components/accordion/accordion-skeleton.d.ts +40 -0
- package/es/components/accordion/accordion-skeleton.d.ts.map +1 -0
- package/es/components/accordion/accordion-skeleton.js +166 -0
- package/es/components/accordion/accordion-skeleton.js.map +1 -0
- package/es/components/accordion/accordion.css.js +1 -1
- package/es/components/accordion/accordion.d.ts +2 -2
- package/es/components/accordion/accordion.d.ts.map +1 -1
- package/es/components/accordion/accordion.js +5 -5
- package/es/components/accordion/accordion.js.map +1 -1
- package/es/components/accordion/accordion.rtl.css.js +1 -1
- package/es/components/accordion/index.d.ts +3 -1
- package/es/components/accordion/index.d.ts.map +1 -1
- package/es/components/accordion/index.js +3 -1
- package/es/components/accordion/index.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-item.d.ts +2 -2
- package/es/components/breadcrumb/breadcrumb-item.d.ts.map +1 -1
- package/es/components/breadcrumb/breadcrumb-item.js +5 -5
- package/es/components/breadcrumb/breadcrumb-item.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-link.d.ts +4 -3
- package/es/components/breadcrumb/breadcrumb-link.d.ts.map +1 -1
- package/es/components/breadcrumb/breadcrumb-link.js +20 -6
- package/es/components/breadcrumb/breadcrumb-link.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-overflow-menu.d.ts +3 -3
- package/es/components/breadcrumb/breadcrumb-overflow-menu.d.ts.map +1 -1
- package/es/components/breadcrumb/breadcrumb-overflow-menu.js +6 -6
- package/es/components/breadcrumb/breadcrumb-overflow-menu.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-skeleton.d.ts +19 -0
- package/es/components/breadcrumb/breadcrumb-skeleton.d.ts.map +1 -0
- package/es/components/breadcrumb/breadcrumb-skeleton.js +59 -0
- package/es/components/breadcrumb/breadcrumb-skeleton.js.map +1 -0
- package/es/components/breadcrumb/breadcrumb.css.js +1 -1
- package/es/components/breadcrumb/breadcrumb.d.ts +6 -2
- package/es/components/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/es/components/breadcrumb/breadcrumb.js +30 -10
- package/es/components/breadcrumb/breadcrumb.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb.rtl.css.js +1 -1
- package/es/components/breadcrumb/index.d.ts +2 -1
- package/es/components/breadcrumb/index.d.ts.map +1 -1
- package/es/components/breadcrumb/index.js +2 -1
- package/es/components/breadcrumb/index.js.map +1 -1
- package/es/components/button/button-set.d.ts +32 -0
- package/es/components/button/button-set.d.ts.map +1 -0
- package/es/components/button/button-set.js +92 -0
- package/es/components/button/button-set.js.map +1 -0
- package/es/components/button/button.css.js +1 -1
- package/es/components/button/button.d.ts +47 -8
- package/es/components/button/button.d.ts.map +1 -1
- package/es/components/button/button.js +187 -34
- package/es/components/button/button.js.map +1 -1
- package/es/components/button/button.rtl.css.js +1 -1
- package/es/components/button/defs.d.ts +60 -14
- package/es/components/button/defs.d.ts.map +1 -1
- package/es/components/button/defs.js +34 -11
- package/es/components/button/defs.js.map +1 -1
- package/es/components/button/index.d.ts +2 -1
- package/es/components/button/index.d.ts.map +1 -1
- package/es/components/button/index.js +2 -1
- package/es/components/button/index.js.map +1 -1
- package/es/components/checkbox/checkbox.css.js +1 -1
- package/es/components/checkbox/checkbox.rtl.css.js +1 -1
- package/es/components/code-snippet/code-snippet.css.js +1 -1
- package/es/components/code-snippet/code-snippet.rtl.css.js +1 -1
- package/es/components/combo-box/combo-box.css.js +1 -1
- package/es/components/combo-box/combo-box.rtl.css.js +1 -1
- package/es/components/data-table/data-table.css.js +1 -1
- package/es/components/data-table/data-table.rtl.css.js +1 -1
- package/es/components/date-picker/date-picker.css.js +1 -1
- package/es/components/date-picker/date-picker.rtl.css.js +1 -1
- package/es/components/dropdown/dropdown.css.js +1 -1
- package/es/components/dropdown/dropdown.rtl.css.js +1 -1
- package/es/components/file-uploader/file-uploader.css.js +1 -1
- package/es/components/file-uploader/file-uploader.rtl.css.js +1 -1
- package/es/components/form/form-item.css.js +1 -1
- package/es/components/form/form-item.rtl.css.js +1 -1
- package/es/components/input/input.css.js +1 -1
- package/es/components/input/input.rtl.css.js +1 -1
- package/es/components/layer/index.d.ts +11 -0
- package/es/components/layer/index.d.ts.map +1 -0
- package/es/components/layer/index.js +11 -0
- package/es/components/layer/index.js.map +1 -0
- package/es/components/layer/layer.css.js +12 -0
- package/es/components/layer/layer.d.ts +36 -0
- package/es/components/layer/layer.d.ts.map +1 -0
- package/es/components/layer/layer.js +117 -0
- package/es/components/layer/layer.js.map +1 -0
- package/es/components/layer/layer.rtl.css.js +12 -0
- package/es/components/link/link.d.ts +16 -8
- package/es/components/link/link.d.ts.map +1 -1
- package/es/components/link/link.js +41 -9
- package/es/components/link/link.js.map +1 -1
- package/es/components/multi-select/multi-select.css.js +1 -1
- package/es/components/multi-select/multi-select.rtl.css.js +1 -1
- package/es/components/number-input/number-input.css.js +1 -1
- package/es/components/number-input/number-input.rtl.css.js +1 -1
- package/es/components/pagination/pagination.css.js +1 -1
- package/es/components/pagination/pagination.rtl.css.js +1 -1
- package/es/components/radio-button/radio-button-group.d.ts +16 -4
- package/es/components/radio-button/radio-button-group.d.ts.map +1 -1
- package/es/components/radio-button/radio-button-group.js +55 -8
- package/es/components/radio-button/radio-button-group.js.map +1 -1
- package/es/components/radio-button/radio-button.css.js +1 -1
- package/es/components/radio-button/radio-button.d.ts +12 -4
- package/es/components/radio-button/radio-button.d.ts.map +1 -1
- package/es/components/radio-button/radio-button.js +44 -12
- package/es/components/radio-button/radio-button.js.map +1 -1
- package/es/components/radio-button/radio-button.rtl.css.js +1 -1
- package/es/components/search/search.css.js +1 -1
- package/es/components/search/search.rtl.css.js +1 -1
- package/es/components/select/select.css.js +1 -1
- package/es/components/select/select.rtl.css.js +1 -1
- package/es/components/slider/slider.css.js +1 -1
- package/es/components/slider/slider.rtl.css.js +1 -1
- package/es/components/tabs/tabs.css.js +1 -1
- package/es/components/tabs/tabs.rtl.css.js +1 -1
- package/es/components/tag/defs.d.ts +3 -3
- package/es/components/tag/defs.d.ts.map +1 -1
- package/es/components/tag/defs.js +2 -2
- package/es/components/tag/defs.js.map +1 -1
- package/es/components/tag/index.d.ts +1 -2
- package/es/components/tag/index.d.ts.map +1 -1
- package/es/components/tag/index.js +1 -2
- package/es/components/tag/index.js.map +1 -1
- package/es/components/tag/tag.css.js +1 -1
- package/es/components/tag/tag.d.ts +660 -3
- package/es/components/tag/tag.d.ts.map +1 -1
- package/es/components/tag/tag.js +160 -13
- package/es/components/tag/tag.js.map +1 -1
- package/es/components/tag/tag.rtl.css.js +1 -1
- package/es/components/textarea/textarea.css.js +1 -1
- package/es/components/textarea/textarea.rtl.css.js +1 -1
- package/es/components/tile/expandable-tile.d.ts +5 -5
- package/es/components/tile/expandable-tile.d.ts.map +1 -1
- package/es/components/tile/expandable-tile.js +50 -36
- package/es/components/tile/expandable-tile.js.map +1 -1
- package/es/components/tile/radio-tile.d.ts +6 -338
- package/es/components/tile/radio-tile.d.ts.map +1 -1
- package/es/components/tile/radio-tile.js +36 -127
- package/es/components/tile/radio-tile.js.map +1 -1
- package/es/components/tile/selectable-tile.d.ts +322 -1
- package/es/components/tile/selectable-tile.d.ts.map +1 -1
- package/es/components/tile/selectable-tile.js +26 -10
- package/es/components/tile/selectable-tile.js.map +1 -1
- package/es/components/tile/tile-group.d.ts +380 -3
- package/es/components/tile/tile-group.d.ts.map +1 -1
- package/es/components/tile/tile-group.js +336 -19
- package/es/components/tile/tile-group.js.map +1 -1
- package/es/components/tile/tile.css.js +1 -1
- package/es/components/tile/tile.rtl.css.js +1 -1
- package/es/components/toggle/toggle.css.js +1 -1
- package/es/components/toggle/toggle.d.ts +13 -5
- package/es/components/toggle/toggle.d.ts.map +1 -1
- package/es/components/toggle/toggle.js +46 -15
- package/es/components/toggle/toggle.js.map +1 -1
- package/es/components/toggle/toggle.rtl.css.js +1 -1
- package/es/components/toggle-tip/toggletip.css.js +1 -1
- package/es/components/toggle-tip/toggletip.d.ts +5 -1
- package/es/components/toggle-tip/toggletip.d.ts.map +1 -1
- package/es/components/toggle-tip/toggletip.js +12 -12
- package/es/components/toggle-tip/toggletip.js.map +1 -1
- package/es/components/toggle-tip/toggletip.rtl.css.js +1 -1
- package/es/components/tooltip/tooltip-body.d.ts.map +1 -1
- package/es/components/tooltip/tooltip-body.js +1 -5
- package/es/components/tooltip/tooltip-body.js.map +1 -1
- package/es/components/tooltip/tooltip.css.js +1 -1
- package/es/components/tooltip/tooltip.d.ts +1 -2
- package/es/components/tooltip/tooltip.d.ts.map +1 -1
- package/es/components/tooltip/tooltip.js +9 -3
- package/es/components/tooltip/tooltip.js.map +1 -1
- package/es/components/tooltip/tooltip.rtl.css.js +1 -1
- package/es/components-react/accordion/accordion-item-skeleton.d.ts +15 -0
- package/es/components-react/accordion/accordion-item-skeleton.js +21 -0
- package/es/components-react/accordion/accordion-item.d.ts +2 -2
- package/es/components-react/accordion/accordion-skeleton.d.ts +15 -0
- package/es/components-react/accordion/accordion-skeleton.js +21 -0
- package/es/components-react/accordion/accordion.d.ts +2 -2
- package/es/components-react/breadcrumb/breadcrumb-item.d.ts +2 -2
- package/es/components-react/breadcrumb/breadcrumb-link.d.ts +2 -2
- package/es/components-react/breadcrumb/breadcrumb-overflow-menu.d.ts +2 -2
- package/es/components-react/breadcrumb/breadcrumb-skeleton.d.ts +15 -0
- package/es/components-react/breadcrumb/breadcrumb-skeleton.js +21 -0
- package/es/components-react/breadcrumb/breadcrumb.d.ts +2 -2
- package/es/components-react/button/button-set.d.ts +15 -0
- package/es/components-react/button/button-set.js +21 -0
- package/es/components-react/button/button.js +7 -1
- package/es/components-react/layer/index.d.ts +14 -0
- package/es/components-react/layer/index.js +8 -0
- package/es/components-react/layer/layer.d.ts +19 -0
- package/es/components-react/{tag/filter-tag.js → layer/layer.js} +5 -10
- package/es/components-react/link/link.d.ts +2 -2
- package/es/components-react/radio-button/radio-button-group.d.ts +2 -2
- package/es/components-react/radio-button/radio-button.d.ts +2 -2
- package/es/components-react/tag/tag.d.ts +11 -2
- package/es/components-react/tag/tag.js +12 -2
- package/es/components-react/tile/radio-tile.d.ts +8 -3
- package/es/components-react/tile/radio-tile.js +8 -2
- package/es/components-react/tile/tile-group.d.ts +10 -2
- package/es/components-react/tile/tile-group.js +12 -2
- package/es/components-react/toggle/toggle.d.ts +2 -2
- package/es/globals/internal/radio-group-manager.d.ts +3 -2
- package/es/globals/internal/radio-group-manager.d.ts.map +1 -1
- package/es/globals/internal/radio-group-manager.js +5 -4
- package/es/globals/internal/radio-group-manager.js.map +1 -1
- package/es/index.d.ts +0 -1
- package/es/index.d.ts.map +1 -1
- package/es/index.js +0 -1
- package/es/index.js.map +1 -1
- package/lib/components/button/defs.js +36 -13
- package/lib/components/button/defs.js.map +1 -1
- package/lib/components/tag/defs.js +2 -2
- package/lib/components/tag/defs.js.map +1 -1
- package/lib/components-react-node/accordion/accordion-item-skeleton.js +36 -0
- package/lib/components-react-node/accordion/accordion-skeleton.js +36 -0
- package/lib/components-react-node/breadcrumb/breadcrumb-skeleton.js +36 -0
- package/lib/components-react-node/button/button-set.js +36 -0
- package/lib/components-react-node/button/button.js +18 -6
- package/lib/components-react-node/layer/index.js +9 -0
- package/lib/components-react-node/{tag/filter-tag.js → layer/layer.js} +4 -21
- package/lib/components-react-node/tag/tag.js +12 -2
- package/lib/components-react-node/tile/radio-tile.js +8 -2
- package/lib/components-react-node/tile/tile-group.js +12 -2
- package/package.json +6 -7
- package/scss/components/accordion/accordion.scss +24 -10
- package/scss/components/breadcrumb/breadcrumb.scss +6 -3
- package/scss/components/button/button.scss +16 -34
- package/scss/components/combo-box/combo-box.scss +0 -1
- package/scss/components/layer/layer.scss +29 -0
- package/scss/components/radio-button/radio-button.scss +6 -6
- package/scss/components/tag/tag.scss +69 -72
- package/scss/components/tile/tile.scss +38 -16
- package/scss/components/toggle/toggle.scss +4 -0
- package/CHANGELOG.md +0 -87
- package/es/components/tag/filter-tag.d.ts +0 -680
- package/es/components/tag/filter-tag.d.ts.map +0 -1
- package/es/components/tag/filter-tag.js +0 -194
- package/es/components/tag/filter-tag.js.map +0 -1
- package/es/components-react/tag/filter-tag.d.ts +0 -24
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import { css } from 'lit';
|
|
10
10
|
export default css([
|
|
11
|
-
"@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item,:host(cds-radio-button),:host(cds-radio-button-skeleton){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;left:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;left:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(:focus),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(:focus),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group,:host(cds-radio-button-group){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;position:relative;display:flex;align-items:center}.cds--radio-button-group *,.cds--radio-button-group ::after,.cds--radio-button-group ::before,:host(cds-radio-button-group) *,:host(cds-radio-button-group) ::after,:host(cds-radio-button-group) ::before{box-sizing:inherit}.cds--label+.cds--form-item .cds--radio-button-group,.cds--label+.cds--form-item :host(cds-radio-button-group),.cds--label+:host(cds-radio-button) .cds--radio-button-group,.cds--label+:host(cds-radio-button) :host(cds-radio-button-group),.cds--label+:host(cds-radio-button-skeleton) .cds--radio-button-group,.cds--label+:host(cds-radio-button-skeleton) :host(cds-radio-button-group){margin-top:0}.cds--radio-button-group--vertical,:host(cds-radio-button-group[orientation=vertical]){flex-direction:column;align-items:flex-start}.cds--radio-button-group--label-left:host(cds-radio-button-group[orientation=vertical]),.cds--radio-button-group--vertical.cds--radio-button-group--label-left,.cds--radio-button-group--vertical:host(cds-radio-button-group[label-position=left]),:host(cds-radio-button-group[label-position=left]):host(cds-radio-button-group[orientation=vertical]){align-items:flex-end}.cds--radio-button-group--vertical .cds--radio-button__label,:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label{margin-right:0;line-height:1.25}.cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label:not(:last-of-type){margin-bottom:.5rem}.cds--radio-button{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap;visibility:inherit}.cds--radio-button__label{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;align-items:center;margin-right:1rem;cursor:pointer}.cds--radio-button__appearance{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;width:1.125rem;height:1.125rem;flex-shrink:0;border:1px solid var(--cds-icon-primary,#161616);margin:.0625rem .5rem .125rem .125rem;background-color:transparent;border-radius:50%}.cds--radio-button__appearance *,.cds--radio-button__appearance ::after,.cds--radio-button__appearance ::before{box-sizing:inherit}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance{display:flex;align-items:center;justify-content:center;border-color:var(--cds-icon-primary,#161616)}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{position:relative;display:inline-block;width:100%;height:100%;background-color:var(--cds-icon-primary,#161616);border-radius:50%;content:\"\";transform:scale(.5)}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{fill:ButtonText;background-color:ButtonText}}.cds--radio-button:disabled+.cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance::before,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance::before{background-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button__label{cursor:default}.cds--radio-button-group--readonly .cds--radio-button__label-text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.cds--radio-button:focus+.cds--radio-button__label .cds--radio-button__appearance{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1.5px}.cds--radio-button__label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:6.25rem;height:1.125rem}.cds--radio-button__label.cds--skeleton:active,.cds--radio-button__label.cds--skeleton:focus,.cds--radio-button__label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--radio-button__label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--radio-button__label.cds--skeleton::before{animation:none}}.cds--radio-button__label.cds--skeleton .cds--radio-button__appearance{display:none}.cds--radio-button-wrapper .cds--radio-button__label,:host(cds-radio-button) .cds--radio-button__label{display:flex;align-items:flex-start;justify-content:center;margin:0}.cds--radio-button-wrapper:not(:last-of-type),:not(:last-of-type):host(cds-radio-button){margin-right:1rem}.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type),.cds--radio-button-group--vertical :not(:last-of-type):host(cds-radio-button),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button-wrapper:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) :not(:last-of-type):host(cds-radio-button){margin-right:0;margin-bottom:.5rem}.cds--radio-button-group--label-right .cds--radio-button__label,.cds--radio-button-wrapper--label-right:host(cds-radio-button) .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label{flex-direction:row}.cds--radio-button-group--label-left .cds--radio-button__label,.cds--radio-button-wrapper--label-left:host(cds-radio-button) .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__label{flex-direction:row-reverse}.cds--radio-button-group--label-left .cds--radio-button__appearance,.cds--radio-button-wrapper--label-left:host(cds-radio-button) .cds--radio-button__appearance,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__appearance{margin-right:0;margin-left:.5rem}:host(cds-radio-button){outline:0}:host(cds-radio-button) .cds--radio-button__label{flex-direction:row}:host(cds-radio-button[disabled]) .cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}:host(cds-radio-button[disabled]) .cds--radio-button__appearance{border-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[disabled]) .cds--radio-button__appearance::before{background-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[label-position=left]) .cds--radio-button__label{flex-direction:row-reverse}:host(cds-radio-button[label-position=left]) .cds--radio-button__appearance{margin-right:0;margin-left:.5rem}",
|
|
11
|
+
"@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;left:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;left:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group,:host(cds-radio-button-group){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;position:relative;display:flex;align-items:center}.cds--radio-button-group *,.cds--radio-button-group ::after,.cds--radio-button-group ::before,:host(cds-radio-button-group) *,:host(cds-radio-button-group) ::after,:host(cds-radio-button-group) ::before{box-sizing:inherit}.cds--label+.cds--form-item .cds--radio-button-group,.cds--label+.cds--form-item :host(cds-radio-button-group){margin-top:0}.cds--radio-button-group--vertical,:host(cds-radio-button-group[orientation=vertical]){flex-direction:column;align-items:flex-start}.cds--radio-button-group--label-left:host(cds-radio-button-group[orientation=vertical]),.cds--radio-button-group--vertical.cds--radio-button-group--label-left,.cds--radio-button-group--vertical:host(cds-radio-button-group[label-position=left]),:host(cds-radio-button-group[label-position=left]):host(cds-radio-button-group[orientation=vertical]){align-items:flex-end}.cds--radio-button-group--vertical .cds--radio-button__label,:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label{margin-right:0;line-height:1.25}.cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label:not(:last-of-type){margin-bottom:.5rem}.cds--radio-button{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap;visibility:inherit}.cds--radio-button__label{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;align-items:center;margin-right:1rem;cursor:pointer}.cds--radio-button__appearance{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;width:1.125rem;height:1.125rem;flex-shrink:0;border:1px solid var(--cds-icon-primary,#161616);margin:.0625rem .5rem .125rem .125rem;background-color:transparent;border-radius:50%}.cds--radio-button__appearance *,.cds--radio-button__appearance ::after,.cds--radio-button__appearance ::before{box-sizing:inherit}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance{display:flex;align-items:center;justify-content:center;border-color:var(--cds-icon-primary,#161616)}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{position:relative;display:inline-block;width:100%;height:100%;background-color:var(--cds-icon-primary,#161616);border-radius:50%;content:\"\";transform:scale(.5)}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{fill:ButtonText;background-color:ButtonText}}.cds--radio-button:disabled+.cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance::before,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance::before{background-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button+.cds--radio-button__label .cds--radio-button__appearance,:host(cds-radio-button[readOnly]) .cds--radio-button+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button__label,:host(cds-radio-button[readOnly]) .cds--radio-button__label{cursor:default}.cds--radio-button-group--readonly .cds--radio-button__label-text,:host(cds-radio-button[readOnly]) .cds--radio-button__label-text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.cds--radio-button:focus+.cds--radio-button__label .cds--radio-button__appearance{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1.5px}.cds--radio-button__label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:6.25rem;height:1.125rem}.cds--radio-button__label.cds--skeleton:active,.cds--radio-button__label.cds--skeleton:focus,.cds--radio-button__label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--radio-button__label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--radio-button__label.cds--skeleton::before{animation:none}}.cds--radio-button__label.cds--skeleton .cds--radio-button__appearance{display:none}.cds--radio-button-wrapper .cds--radio-button__label,:host(cds-radio-button) .cds--radio-button__label{display:flex;align-items:flex-start;justify-content:center;margin:0}.cds--radio-button-wrapper:not(:last-of-type),:not(:last-of-type):host(cds-radio-button){margin-right:1rem}.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type),.cds--radio-button-group--vertical :not(:last-of-type):host(cds-radio-button),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button-wrapper:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) :not(:last-of-type):host(cds-radio-button){margin-right:0;margin-bottom:.5rem}.cds--radio-button-group--label-right .cds--radio-button__label,.cds--radio-button-wrapper--label-right:host(cds-radio-button) .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label{flex-direction:row}.cds--radio-button-group--label-left .cds--radio-button__label,.cds--radio-button-wrapper--label-left:host(cds-radio-button) .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__label{flex-direction:row-reverse}.cds--radio-button-group--label-left .cds--radio-button__appearance,.cds--radio-button-wrapper--label-left:host(cds-radio-button) .cds--radio-button__appearance,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__appearance{margin-right:0;margin-left:.5rem}:host(cds-radio-button){outline:0}:host(cds-radio-button) .cds--radio-button__label{flex-direction:row}:host(cds-radio-button[disabledItem]) .cds--radio-button__label,:host(cds-radio-button[disabled]) .cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}:host(cds-radio-button[disabledItem]) .cds--radio-button__appearance,:host(cds-radio-button[disabled]) .cds--radio-button__appearance{border-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[disabledItem]) .cds--radio-button__appearance::before,:host(cds-radio-button[disabled]) .cds--radio-button__appearance::before{background-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[label-position=left]) .cds--radio-button__label{flex-direction:row-reverse}:host(cds-radio-button[label-position=left]) .cds--radio-button__appearance{margin-right:0;margin-left:.5rem}",
|
|
12
12
|
]);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { LitElement } from 'lit';
|
|
10
10
|
import { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';
|
|
11
11
|
export { RADIO_BUTTON_LABEL_POSITION };
|
|
12
|
-
declare const
|
|
12
|
+
declare const CDSRadioButton_base: {
|
|
13
13
|
new (...args: any[]): {
|
|
14
14
|
_handles: Set<import("../../globals/internal/handle").default>;
|
|
15
15
|
connectedCallback(): void;
|
|
@@ -636,7 +636,7 @@ declare const BXRadioButton_base: {
|
|
|
636
636
|
* @element cds-radio-button
|
|
637
637
|
* @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.
|
|
638
638
|
*/
|
|
639
|
-
declare class
|
|
639
|
+
declare class CDSRadioButton extends CDSRadioButton_base {
|
|
640
640
|
/**
|
|
641
641
|
* The radio group manager associated with the radio button.
|
|
642
642
|
*/
|
|
@@ -662,7 +662,11 @@ declare class BXRadioButton extends BXRadioButton_base {
|
|
|
662
662
|
*/
|
|
663
663
|
checked: boolean;
|
|
664
664
|
/**
|
|
665
|
-
* `true` if the
|
|
665
|
+
* `true` if the radio button item should be disabled.
|
|
666
|
+
*/
|
|
667
|
+
disabledItem: boolean;
|
|
668
|
+
/**
|
|
669
|
+
* `true` if the radio button group should be disabled.
|
|
666
670
|
*/
|
|
667
671
|
disabled: boolean;
|
|
668
672
|
/**
|
|
@@ -685,6 +689,10 @@ declare class BXRadioButton extends BXRadioButton_base {
|
|
|
685
689
|
* The orientation to lay out radio buttons.
|
|
686
690
|
*/
|
|
687
691
|
orientation: RADIO_BUTTON_ORIENTATION;
|
|
692
|
+
/**
|
|
693
|
+
* `true` if the radio button group should be disabled.
|
|
694
|
+
*/
|
|
695
|
+
readOnly: boolean;
|
|
688
696
|
/**
|
|
689
697
|
* The `value` attribute for the `<input>` for selection.
|
|
690
698
|
*/
|
|
@@ -704,6 +712,6 @@ declare class BXRadioButton extends BXRadioButton_base {
|
|
|
704
712
|
};
|
|
705
713
|
static styles: any;
|
|
706
714
|
}
|
|
707
|
-
export default
|
|
715
|
+
export default CDSRadioButton;
|
|
708
716
|
|
|
709
717
|
//# sourceMappingURL=radio-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAG/E,OAAO,EAAE,2BAA2B,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EvC;;;;;GAKG;AACH,cACM,aAAc,SAAQ,kBAAyC;IACnE;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkC;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAuB;IAEnD;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IAGH,OAAO,CAAC,YAAY,CAQlB;IAEF;;OAEG;IAGH,OAAO,CAAC,cAAc,CAkBpB;IAEF;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,aAAa,8BAAqC;IAElD;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,WAAW,2BAAuC;IAElD;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,oBAAoB;IAOpB,YAAY;IAIZ,OAAO,CAAC,iBAAiB,KAAA;IA4BzB,MAAM;IAqBN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"radio-button.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n NAVIGATION_DIRECTION,\n ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';\nimport styles from './radio-button.scss';\n\nexport { RADIO_BUTTON_LABEL_POSITION };\n\n/**\n * Map of navigation direction by key for horizontal alignment.\n */\nconst navigationDirectionForKeyHorizontal = {\n ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,\n Left: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowRight: NAVIGATION_DIRECTION.FORWARD,\n Right: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Map of navigation direction by key for vertical alignment.\n */\nconst navigationDirectionForKeyVertical = {\n ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for radio button.\n */\nclass RadioButtonDelegate implements ManagedRadioButtonDelegate {\n /**\n * The radio button to target.\n */\n private _radio: HTMLInputElement;\n\n constructor(radio: HTMLInputElement) {\n this._radio = radio;\n }\n\n get checked() {\n return this._radio.checked;\n }\n\n set checked(checked) {\n const { host } = this._radio.getRootNode() as ShadowRoot;\n const { eventChange } = host.constructor as typeof BXRadioButton; // eslint-disable-line no-use-before-define\n (host as BXRadioButton).checked = checked;\n this._radio.tabIndex = checked ? 0 : -1;\n host.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n checked,\n },\n })\n );\n }\n\n get tabIndex() {\n return this._radio.tabIndex;\n }\n\n set tabIndex(tabIndex) {\n this._radio.tabIndex = tabIndex;\n }\n\n get name() {\n return this._radio.name;\n }\n\n compareDocumentPosition(other: RadioButtonDelegate) {\n return this._radio.compareDocumentPosition(other._radio);\n }\n\n focus() {\n this._radio.focus();\n }\n}\n\n/**\n * Radio button.\n *\n * @element cds-radio-button\n * @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.\n */\n@customElement(`${prefix}-radio-button`)\nclass BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {\n /**\n * The radio group manager associated with the radio button.\n */\n private _manager: RadioGroupManager | null = null;\n\n /**\n * The interface for `RadioGroupManager` for radio button.\n */\n private _radioButtonDelegate!: RadioButtonDelegate;\n\n /**\n * The hidden radio button.\n */\n @query('#input')\n private _inputNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on this element.\n */\n @HostListener('click')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = () => {\n const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;\n if (radioButtonDelegate && !disabled) {\n this.checked = true;\n if (this._manager) {\n this._manager.select(radioButtonDelegate);\n }\n }\n };\n\n /**\n * Handles `keydown` event on this element.\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { orientation, _radioButtonDelegate: radioButtonDelegate } = this;\n const manager = this._manager;\n if (radioButtonDelegate && manager) {\n const navigationDirectionForKey =\n orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL\n ? navigationDirectionForKeyHorizontal\n : navigationDirectionForKeyVertical;\n const navigationDirection = navigationDirectionForKey[event.key];\n if (navigationDirection) {\n manager.select(\n manager.navigate(radioButtonDelegate, navigationDirection)\n );\n }\n if (event.key === ' ' || event.key === 'Enter') {\n manager.select(radioButtonDelegate);\n }\n }\n };\n\n /**\n * `true` if this radio button should be checked.\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * `true` if the check box should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * `true` if the label should be hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n /**\n * The label position.\n */\n @property({ reflect: true, attribute: 'label-position' })\n labelPosition = RADIO_BUTTON_LABEL_POSITION.RIGHT;\n\n /**\n * The label text.\n */\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /**\n * The `name` attribute for the `<input>` for selection.\n */\n @property()\n name!: string;\n\n /**\n * The orientation to lay out radio buttons.\n */\n @property({ reflect: true })\n orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;\n\n /**\n * The `value` attribute for the `<input>` for selection.\n */\n @property()\n value!: string;\n\n disconnectedCallback() {\n if (this._manager) {\n this._manager.delete(this._radioButtonDelegate);\n }\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n this._radioButtonDelegate = new RadioButtonDelegate(this._inputNode);\n }\n\n updated(changedProperties) {\n const {\n _inputNode: inputNode,\n _radioButtonDelegate: radioButtonDelegate,\n name,\n } = this;\n if (changedProperties.has('checked') || changedProperties.has('name')) {\n if (!this._manager) {\n this._manager = RadioGroupManager.get(\n this.getRootNode({ composed: true }) as Document\n );\n }\n const { _manager: manager } = this;\n if (changedProperties.has('name')) {\n manager!.delete(radioButtonDelegate, changedProperties.get('name'));\n if (name) {\n manager!.add(radioButtonDelegate);\n }\n }\n inputNode.setAttribute(\n 'tabindex',\n !name || !manager || !manager.shouldBeFocusable(radioButtonDelegate)\n ? '-1'\n : '0'\n );\n }\n }\n\n render() {\n const { checked, hideLabel, labelText, name, value, disabled } = this;\n const innerLabelClasses = classMap({\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n return html`\n <input\n id=\"input\"\n type=\"radio\"\n class=\"${prefix}--radio-button\"\n .checked=${checked}\n ?disabled=\"${disabled}\"\n name=${ifDefined(name)}\n value=${ifDefined(value)} />\n <label for=\"input\" class=\"${prefix}--radio-button__label\">\n <span class=\"${prefix}--radio-button__appearance\"></span>\n <span class=\"${innerLabelClasses}\"><slot>${labelText}</slot></span>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this radio button changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-radio-button-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default BXRadioButton;\n"]}
|
|
1
|
+
{"version":3,"sources":["components/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAG/E,OAAO,EAAE,2BAA2B,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EvC;;;;;GAKG;AACH,cACM,cAAe,SAAQ,mBAAyC;IACpE;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkC;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAuB;IAEnD;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IAGH,OAAO,CAAC,YAAY,CAQlB;IAEF;;OAEG;IAGH,OAAO,CAAC,cAAc,CAmBpB;IAEF;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,aAAa,8BAAqC;IAElD;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,WAAW,2BAAuC;IAElD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,oBAAoB;IAOpB,YAAY;IAIZ,OAAO,CAAC,iBAAiB,KAAA;IA+BzB,MAAM;IA6BN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"radio-button.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n NAVIGATION_DIRECTION,\n ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';\nimport styles from './radio-button.scss';\n\nexport { RADIO_BUTTON_LABEL_POSITION };\n\n/**\n * Map of navigation direction by key for horizontal alignment.\n */\nconst navigationDirectionForKeyHorizontal = {\n ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,\n Left: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowRight: NAVIGATION_DIRECTION.FORWARD,\n Right: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Map of navigation direction by key for vertical alignment.\n */\nconst navigationDirectionForKeyVertical = {\n ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for radio button.\n */\nclass RadioButtonDelegate implements ManagedRadioButtonDelegate {\n /**\n * The radio button to target.\n */\n private _radio: HTMLInputElement;\n\n constructor(radio: HTMLInputElement) {\n this._radio = radio;\n }\n\n get checked() {\n return this._radio.checked;\n }\n\n set checked(checked) {\n const { host } = this._radio.getRootNode() as ShadowRoot;\n const { eventChange } = host.constructor as typeof CDSRadioButton; // eslint-disable-line no-use-before-define\n (host as CDSRadioButton).checked = checked;\n this._radio.tabIndex = checked ? 0 : -1;\n host.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n checked,\n },\n })\n );\n }\n\n get tabIndex() {\n return this._radio.tabIndex;\n }\n\n set tabIndex(tabIndex) {\n this._radio.tabIndex = tabIndex;\n }\n\n get name() {\n return this._radio.name;\n }\n\n compareDocumentPosition(other: RadioButtonDelegate) {\n return this._radio.compareDocumentPosition(other._radio);\n }\n\n focus() {\n this._radio.focus();\n }\n}\n\n/**\n * Radio button.\n *\n * @element cds-radio-button\n * @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.\n */\n@customElement(`${prefix}-radio-button`)\nclass CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {\n /**\n * The radio group manager associated with the radio button.\n */\n private _manager: RadioGroupManager | null = null;\n\n /**\n * The interface for `RadioGroupManager` for radio button.\n */\n private _radioButtonDelegate!: RadioButtonDelegate;\n\n /**\n * The hidden radio button.\n */\n @query('#input')\n private _inputNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on this element.\n */\n @HostListener('click')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = () => {\n const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;\n if (radioButtonDelegate && !disabled && !this.disabledItem) {\n this.checked = true;\n if (this._manager) {\n this._manager.select(radioButtonDelegate, this.readOnly);\n }\n }\n };\n\n /**\n * Handles `keydown` event on this element.\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { orientation, _radioButtonDelegate: radioButtonDelegate } = this;\n const manager = this._manager;\n if (radioButtonDelegate && manager) {\n const navigationDirectionForKey =\n orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL\n ? navigationDirectionForKeyHorizontal\n : navigationDirectionForKeyVertical;\n const navigationDirection = navigationDirectionForKey[event.key];\n if (navigationDirection) {\n manager.select(\n manager.navigate(radioButtonDelegate, navigationDirection),\n this.readOnly\n );\n }\n if (event.key === ' ' || event.key === 'Enter') {\n manager.select(radioButtonDelegate, this.readOnly);\n }\n }\n };\n\n /**\n * `true` if this radio button should be checked.\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * `true` if the radio button item should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabledItem = false;\n\n /**\n * `true` if the radio button group should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * `true` if the label should be hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n /**\n * The label position.\n */\n @property({ reflect: true, attribute: 'label-position' })\n labelPosition = RADIO_BUTTON_LABEL_POSITION.RIGHT;\n\n /**\n * The label text.\n */\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /**\n * The `name` attribute for the `<input>` for selection.\n */\n @property()\n name!: string;\n\n /**\n * The orientation to lay out radio buttons.\n */\n @property({ reflect: true })\n orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;\n\n /**\n * `true` if the radio button group should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n readOnly = false;\n\n /**\n * The `value` attribute for the `<input>` for selection.\n */\n @property()\n value!: string;\n\n disconnectedCallback() {\n if (this._manager) {\n this._manager.delete(this._radioButtonDelegate);\n }\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n this._radioButtonDelegate = new RadioButtonDelegate(this._inputNode);\n }\n\n updated(changedProperties) {\n const {\n _inputNode: inputNode,\n _radioButtonDelegate: radioButtonDelegate,\n name,\n } = this;\n if (changedProperties.has('checked') || changedProperties.has('name')) {\n if (this.readOnly) {\n this.checked = false;\n }\n if (!this._manager) {\n this._manager = RadioGroupManager.get(\n this.getRootNode({ composed: true }) as Document\n );\n }\n const { _manager: manager } = this;\n if (changedProperties.has('name')) {\n manager!.delete(radioButtonDelegate, changedProperties.get('name'));\n if (name) {\n manager!.add(radioButtonDelegate);\n }\n }\n inputNode.setAttribute(\n 'tabindex',\n !name || !manager || !manager.shouldBeFocusable(radioButtonDelegate)\n ? '-1'\n : '0'\n );\n }\n }\n\n render() {\n const {\n checked,\n hideLabel,\n labelText,\n name,\n value,\n disabled,\n disabledItem,\n } = this;\n const innerLabelClasses = classMap({\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n return html`\n <input\n id=\"input\"\n type=\"radio\"\n class=\"${prefix}--radio-button\"\n .checked=${checked}\n ?disabled=\"${disabledItem || disabled}\"\n name=${ifDefined(name)}\n value=${ifDefined(value)} />\n <label for=\"input\" class=\"${prefix}--radio-button__label\">\n <span class=\"${prefix}--radio-button__appearance\"></span>\n <span class=\"${innerLabelClasses}\"><slot>${labelText}</slot></span>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this radio button changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-radio-button-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSRadioButton;\n"]}
|
|
@@ -102,15 +102,15 @@ class RadioButtonDelegate {
|
|
|
102
102
|
* @element cds-radio-button
|
|
103
103
|
* @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.
|
|
104
104
|
*/
|
|
105
|
-
let
|
|
106
|
-
class
|
|
105
|
+
let CDSRadioButton = _decorate([customElement(`${prefix}-radio-button`)], function (_initialize, _HostListenerMixin) {
|
|
106
|
+
class CDSRadioButton extends _HostListenerMixin {
|
|
107
107
|
constructor(...args) {
|
|
108
108
|
super(...args);
|
|
109
109
|
_initialize(this);
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
return {
|
|
113
|
-
F:
|
|
113
|
+
F: CDSRadioButton,
|
|
114
114
|
d: [{
|
|
115
115
|
kind: "field",
|
|
116
116
|
key: "_manager",
|
|
@@ -132,10 +132,10 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
132
132
|
disabled,
|
|
133
133
|
_radioButtonDelegate: radioButtonDelegate
|
|
134
134
|
} = this;
|
|
135
|
-
if (radioButtonDelegate && !disabled) {
|
|
135
|
+
if (radioButtonDelegate && !disabled && !this.disabledItem) {
|
|
136
136
|
this.checked = true;
|
|
137
137
|
if (this._manager) {
|
|
138
|
-
this._manager.select(radioButtonDelegate);
|
|
138
|
+
this._manager.select(radioButtonDelegate, this.readOnly);
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
};
|
|
@@ -155,10 +155,10 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
155
155
|
const navigationDirectionForKey = orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL ? navigationDirectionForKeyHorizontal : navigationDirectionForKeyVertical;
|
|
156
156
|
const navigationDirection = navigationDirectionForKey[event.key];
|
|
157
157
|
if (navigationDirection) {
|
|
158
|
-
manager.select(manager.navigate(radioButtonDelegate, navigationDirection));
|
|
158
|
+
manager.select(manager.navigate(radioButtonDelegate, navigationDirection), this.readOnly);
|
|
159
159
|
}
|
|
160
160
|
if (event.key === ' ' || event.key === 'Enter') {
|
|
161
|
-
manager.select(radioButtonDelegate);
|
|
161
|
+
manager.select(radioButtonDelegate, this.readOnly);
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
};
|
|
@@ -173,6 +173,16 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
173
173
|
value() {
|
|
174
174
|
return false;
|
|
175
175
|
}
|
|
176
|
+
}, {
|
|
177
|
+
kind: "field",
|
|
178
|
+
decorators: [property({
|
|
179
|
+
type: Boolean,
|
|
180
|
+
reflect: true
|
|
181
|
+
})],
|
|
182
|
+
key: "disabledItem",
|
|
183
|
+
value() {
|
|
184
|
+
return false;
|
|
185
|
+
}
|
|
176
186
|
}, {
|
|
177
187
|
kind: "field",
|
|
178
188
|
decorators: [property({
|
|
@@ -227,6 +237,16 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
227
237
|
value() {
|
|
228
238
|
return RADIO_BUTTON_ORIENTATION.HORIZONTAL;
|
|
229
239
|
}
|
|
240
|
+
}, {
|
|
241
|
+
kind: "field",
|
|
242
|
+
decorators: [property({
|
|
243
|
+
type: Boolean,
|
|
244
|
+
reflect: true
|
|
245
|
+
})],
|
|
246
|
+
key: "readOnly",
|
|
247
|
+
value() {
|
|
248
|
+
return false;
|
|
249
|
+
}
|
|
230
250
|
}, {
|
|
231
251
|
kind: "field",
|
|
232
252
|
decorators: [property()],
|
|
@@ -257,7 +277,11 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
257
277
|
*/
|
|
258
278
|
|
|
259
279
|
/**
|
|
260
|
-
* `true` if the
|
|
280
|
+
* `true` if the radio button item should be disabled.
|
|
281
|
+
*/
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* `true` if the radio button group should be disabled.
|
|
261
285
|
*/
|
|
262
286
|
|
|
263
287
|
/**
|
|
@@ -280,6 +304,10 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
280
304
|
* The orientation to lay out radio buttons.
|
|
281
305
|
*/
|
|
282
306
|
|
|
307
|
+
/**
|
|
308
|
+
* `true` if the radio button group should be disabled.
|
|
309
|
+
*/
|
|
310
|
+
|
|
283
311
|
/**
|
|
284
312
|
* The `value` attribute for the `<input>` for selection.
|
|
285
313
|
*/
|
|
@@ -288,7 +316,7 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
288
316
|
if (this._manager) {
|
|
289
317
|
this._manager.delete(this._radioButtonDelegate);
|
|
290
318
|
}
|
|
291
|
-
_get(_getPrototypeOf(
|
|
319
|
+
_get(_getPrototypeOf(CDSRadioButton.prototype), "disconnectedCallback", this).call(this);
|
|
292
320
|
}
|
|
293
321
|
}, {
|
|
294
322
|
kind: "method",
|
|
@@ -306,6 +334,9 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
306
334
|
name
|
|
307
335
|
} = this;
|
|
308
336
|
if (changedProperties.has('checked') || changedProperties.has('name')) {
|
|
337
|
+
if (this.readOnly) {
|
|
338
|
+
this.checked = false;
|
|
339
|
+
}
|
|
309
340
|
if (!this._manager) {
|
|
310
341
|
this._manager = RadioGroupManager.get(this.getRootNode({
|
|
311
342
|
composed: true
|
|
@@ -333,7 +364,8 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
333
364
|
labelText,
|
|
334
365
|
name,
|
|
335
366
|
value,
|
|
336
|
-
disabled
|
|
367
|
+
disabled,
|
|
368
|
+
disabledItem
|
|
337
369
|
} = this;
|
|
338
370
|
const innerLabelClasses = classMap({
|
|
339
371
|
[`${prefix}--visually-hidden`]: hideLabel
|
|
@@ -351,7 +383,7 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
351
383
|
<span class="${0}--radio-button__appearance"></span>
|
|
352
384
|
<span class="${0}"><slot>${0}</slot></span>
|
|
353
385
|
</label>
|
|
354
|
-
`), prefix, checked, disabled, ifDefined(name), ifDefined(value), prefix, prefix, innerLabelClasses, labelText);
|
|
386
|
+
`), prefix, checked, disabledItem || disabled, ifDefined(name), ifDefined(value), prefix, prefix, innerLabelClasses, labelText);
|
|
355
387
|
}
|
|
356
388
|
|
|
357
389
|
/**
|
|
@@ -383,5 +415,5 @@ let BXRadioButton = _decorate([customElement(`${prefix}-radio-button`)], functio
|
|
|
383
415
|
}]
|
|
384
416
|
};
|
|
385
417
|
}, HostListenerMixin(FocusMixin(LitElement)));
|
|
386
|
-
export default
|
|
418
|
+
export default CDSRadioButton;
|
|
387
419
|
//# sourceMappingURL=radio-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","names":["classMap","LitElement","html","property","customElement","query","prefix","ifDefined","HostListener","FocusMixin","HostListenerMixin","RadioGroupManager","NAVIGATION_DIRECTION","RADIO_BUTTON_LABEL_POSITION","RADIO_BUTTON_ORIENTATION","styles","navigationDirectionForKeyHorizontal","ArrowLeft","BACKWARD","Left","ArrowRight","FORWARD","Right","navigationDirectionForKeyVertical","ArrowUp","Up","ArrowDown","Down","RadioButtonDelegate","constructor","radio","_radio","checked","host","getRootNode","eventChange","tabIndex","dispatchEvent","CustomEvent","bubbles","composed","detail","name","compareDocumentPosition","other","focus","BXRadioButton","_decorate","_initialize","_HostListenerMixin","args","F","d","kind","key","value","decorators","disabled","_radioButtonDelegate","radioButtonDelegate","_manager","select","event","orientation","manager","navigationDirectionForKey","HORIZONTAL","navigationDirection","navigate","type","Boolean","reflect","attribute","RIGHT","disconnectedCallback","delete","_get","_getPrototypeOf","prototype","call","firstUpdated","_inputNode","updated","changedProperties","inputNode","has","get","add","setAttribute","shouldBeFocusable","render","hideLabel","labelText","innerLabelClasses","_t","_","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/radio-button/radio-button.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n NAVIGATION_DIRECTION,\n ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';\nimport styles from './radio-button.scss';\n\nexport { RADIO_BUTTON_LABEL_POSITION };\n\n/**\n * Map of navigation direction by key for horizontal alignment.\n */\nconst navigationDirectionForKeyHorizontal = {\n ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,\n Left: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowRight: NAVIGATION_DIRECTION.FORWARD,\n Right: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Map of navigation direction by key for vertical alignment.\n */\nconst navigationDirectionForKeyVertical = {\n ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for radio button.\n */\nclass RadioButtonDelegate implements ManagedRadioButtonDelegate {\n /**\n * The radio button to target.\n */\n private _radio: HTMLInputElement;\n\n constructor(radio: HTMLInputElement) {\n this._radio = radio;\n }\n\n get checked() {\n return this._radio.checked;\n }\n\n set checked(checked) {\n const { host } = this._radio.getRootNode() as ShadowRoot;\n const { eventChange } = host.constructor as typeof BXRadioButton; // eslint-disable-line no-use-before-define\n (host as BXRadioButton).checked = checked;\n this._radio.tabIndex = checked ? 0 : -1;\n host.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n checked,\n },\n })\n );\n }\n\n get tabIndex() {\n return this._radio.tabIndex;\n }\n\n set tabIndex(tabIndex) {\n this._radio.tabIndex = tabIndex;\n }\n\n get name() {\n return this._radio.name;\n }\n\n compareDocumentPosition(other: RadioButtonDelegate) {\n return this._radio.compareDocumentPosition(other._radio);\n }\n\n focus() {\n this._radio.focus();\n }\n}\n\n/**\n * Radio button.\n *\n * @element cds-radio-button\n * @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.\n */\n@customElement(`${prefix}-radio-button`)\nclass BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {\n /**\n * The radio group manager associated with the radio button.\n */\n private _manager: RadioGroupManager | null = null;\n\n /**\n * The interface for `RadioGroupManager` for radio button.\n */\n private _radioButtonDelegate!: RadioButtonDelegate;\n\n /**\n * The hidden radio button.\n */\n @query('#input')\n private _inputNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on this element.\n */\n @HostListener('click')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = () => {\n const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;\n if (radioButtonDelegate && !disabled) {\n this.checked = true;\n if (this._manager) {\n this._manager.select(radioButtonDelegate);\n }\n }\n };\n\n /**\n * Handles `keydown` event on this element.\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { orientation, _radioButtonDelegate: radioButtonDelegate } = this;\n const manager = this._manager;\n if (radioButtonDelegate && manager) {\n const navigationDirectionForKey =\n orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL\n ? navigationDirectionForKeyHorizontal\n : navigationDirectionForKeyVertical;\n const navigationDirection = navigationDirectionForKey[event.key];\n if (navigationDirection) {\n manager.select(\n manager.navigate(radioButtonDelegate, navigationDirection)\n );\n }\n if (event.key === ' ' || event.key === 'Enter') {\n manager.select(radioButtonDelegate);\n }\n }\n };\n\n /**\n * `true` if this radio button should be checked.\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * `true` if the check box should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * `true` if the label should be hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n /**\n * The label position.\n */\n @property({ reflect: true, attribute: 'label-position' })\n labelPosition = RADIO_BUTTON_LABEL_POSITION.RIGHT;\n\n /**\n * The label text.\n */\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /**\n * The `name` attribute for the `<input>` for selection.\n */\n @property()\n name!: string;\n\n /**\n * The orientation to lay out radio buttons.\n */\n @property({ reflect: true })\n orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;\n\n /**\n * The `value` attribute for the `<input>` for selection.\n */\n @property()\n value!: string;\n\n disconnectedCallback() {\n if (this._manager) {\n this._manager.delete(this._radioButtonDelegate);\n }\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n this._radioButtonDelegate = new RadioButtonDelegate(this._inputNode);\n }\n\n updated(changedProperties) {\n const {\n _inputNode: inputNode,\n _radioButtonDelegate: radioButtonDelegate,\n name,\n } = this;\n if (changedProperties.has('checked') || changedProperties.has('name')) {\n if (!this._manager) {\n this._manager = RadioGroupManager.get(\n this.getRootNode({ composed: true }) as Document\n );\n }\n const { _manager: manager } = this;\n if (changedProperties.has('name')) {\n manager!.delete(radioButtonDelegate, changedProperties.get('name'));\n if (name) {\n manager!.add(radioButtonDelegate);\n }\n }\n inputNode.setAttribute(\n 'tabindex',\n !name || !manager || !manager.shouldBeFocusable(radioButtonDelegate)\n ? '-1'\n : '0'\n );\n }\n }\n\n render() {\n const { checked, hideLabel, labelText, name, value, disabled } = this;\n const innerLabelClasses = classMap({\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n return html`\n <input\n id=\"input\"\n type=\"radio\"\n class=\"${prefix}--radio-button\"\n .checked=${checked}\n ?disabled=\"${disabled}\"\n name=${ifDefined(name)}\n value=${ifDefined(value)} />\n <label for=\"input\" class=\"${prefix}--radio-button__label\">\n <span class=\"${prefix}--radio-button__appearance\"></span>\n <span class=\"${innerLabelClasses}\"><slot>${labelText}</slot></span>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this radio button changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-radio-button-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default BXRadioButton;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio-button.js","names":["classMap","LitElement","html","property","customElement","query","prefix","ifDefined","HostListener","FocusMixin","HostListenerMixin","RadioGroupManager","NAVIGATION_DIRECTION","RADIO_BUTTON_LABEL_POSITION","RADIO_BUTTON_ORIENTATION","styles","navigationDirectionForKeyHorizontal","ArrowLeft","BACKWARD","Left","ArrowRight","FORWARD","Right","navigationDirectionForKeyVertical","ArrowUp","Up","ArrowDown","Down","RadioButtonDelegate","constructor","radio","_radio","checked","host","getRootNode","eventChange","tabIndex","dispatchEvent","CustomEvent","bubbles","composed","detail","name","compareDocumentPosition","other","focus","CDSRadioButton","_decorate","_initialize","_HostListenerMixin","args","F","d","kind","key","value","decorators","disabled","_radioButtonDelegate","radioButtonDelegate","disabledItem","_manager","select","readOnly","event","orientation","manager","navigationDirectionForKey","HORIZONTAL","navigationDirection","navigate","type","Boolean","reflect","attribute","RIGHT","disconnectedCallback","delete","_get","_getPrototypeOf","prototype","call","firstUpdated","_inputNode","updated","changedProperties","inputNode","has","get","add","setAttribute","shouldBeFocusable","render","hideLabel","labelText","innerLabelClasses","_t","_","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/radio-button/radio-button.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n NAVIGATION_DIRECTION,\n ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';\nimport styles from './radio-button.scss';\n\nexport { RADIO_BUTTON_LABEL_POSITION };\n\n/**\n * Map of navigation direction by key for horizontal alignment.\n */\nconst navigationDirectionForKeyHorizontal = {\n ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,\n Left: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowRight: NAVIGATION_DIRECTION.FORWARD,\n Right: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Map of navigation direction by key for vertical alignment.\n */\nconst navigationDirectionForKeyVertical = {\n ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for radio button.\n */\nclass RadioButtonDelegate implements ManagedRadioButtonDelegate {\n /**\n * The radio button to target.\n */\n private _radio: HTMLInputElement;\n\n constructor(radio: HTMLInputElement) {\n this._radio = radio;\n }\n\n get checked() {\n return this._radio.checked;\n }\n\n set checked(checked) {\n const { host } = this._radio.getRootNode() as ShadowRoot;\n const { eventChange } = host.constructor as typeof CDSRadioButton; // eslint-disable-line no-use-before-define\n (host as CDSRadioButton).checked = checked;\n this._radio.tabIndex = checked ? 0 : -1;\n host.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n checked,\n },\n })\n );\n }\n\n get tabIndex() {\n return this._radio.tabIndex;\n }\n\n set tabIndex(tabIndex) {\n this._radio.tabIndex = tabIndex;\n }\n\n get name() {\n return this._radio.name;\n }\n\n compareDocumentPosition(other: RadioButtonDelegate) {\n return this._radio.compareDocumentPosition(other._radio);\n }\n\n focus() {\n this._radio.focus();\n }\n}\n\n/**\n * Radio button.\n *\n * @element cds-radio-button\n * @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.\n */\n@customElement(`${prefix}-radio-button`)\nclass CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {\n /**\n * The radio group manager associated with the radio button.\n */\n private _manager: RadioGroupManager | null = null;\n\n /**\n * The interface for `RadioGroupManager` for radio button.\n */\n private _radioButtonDelegate!: RadioButtonDelegate;\n\n /**\n * The hidden radio button.\n */\n @query('#input')\n private _inputNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on this element.\n */\n @HostListener('click')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleClick = () => {\n const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;\n if (radioButtonDelegate && !disabled && !this.disabledItem) {\n this.checked = true;\n if (this._manager) {\n this._manager.select(radioButtonDelegate, this.readOnly);\n }\n }\n };\n\n /**\n * Handles `keydown` event on this element.\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { orientation, _radioButtonDelegate: radioButtonDelegate } = this;\n const manager = this._manager;\n if (radioButtonDelegate && manager) {\n const navigationDirectionForKey =\n orientation === RADIO_BUTTON_ORIENTATION.HORIZONTAL\n ? navigationDirectionForKeyHorizontal\n : navigationDirectionForKeyVertical;\n const navigationDirection = navigationDirectionForKey[event.key];\n if (navigationDirection) {\n manager.select(\n manager.navigate(radioButtonDelegate, navigationDirection),\n this.readOnly\n );\n }\n if (event.key === ' ' || event.key === 'Enter') {\n manager.select(radioButtonDelegate, this.readOnly);\n }\n }\n };\n\n /**\n * `true` if this radio button should be checked.\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * `true` if the radio button item should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabledItem = false;\n\n /**\n * `true` if the radio button group should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * `true` if the label should be hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n /**\n * The label position.\n */\n @property({ reflect: true, attribute: 'label-position' })\n labelPosition = RADIO_BUTTON_LABEL_POSITION.RIGHT;\n\n /**\n * The label text.\n */\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /**\n * The `name` attribute for the `<input>` for selection.\n */\n @property()\n name!: string;\n\n /**\n * The orientation to lay out radio buttons.\n */\n @property({ reflect: true })\n orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;\n\n /**\n * `true` if the radio button group should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n readOnly = false;\n\n /**\n * The `value` attribute for the `<input>` for selection.\n */\n @property()\n value!: string;\n\n disconnectedCallback() {\n if (this._manager) {\n this._manager.delete(this._radioButtonDelegate);\n }\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n this._radioButtonDelegate = new RadioButtonDelegate(this._inputNode);\n }\n\n updated(changedProperties) {\n const {\n _inputNode: inputNode,\n _radioButtonDelegate: radioButtonDelegate,\n name,\n } = this;\n if (changedProperties.has('checked') || changedProperties.has('name')) {\n if (this.readOnly) {\n this.checked = false;\n }\n if (!this._manager) {\n this._manager = RadioGroupManager.get(\n this.getRootNode({ composed: true }) as Document\n );\n }\n const { _manager: manager } = this;\n if (changedProperties.has('name')) {\n manager!.delete(radioButtonDelegate, changedProperties.get('name'));\n if (name) {\n manager!.add(radioButtonDelegate);\n }\n }\n inputNode.setAttribute(\n 'tabindex',\n !name || !manager || !manager.shouldBeFocusable(radioButtonDelegate)\n ? '-1'\n : '0'\n );\n }\n }\n\n render() {\n const {\n checked,\n hideLabel,\n labelText,\n name,\n value,\n disabled,\n disabledItem,\n } = this;\n const innerLabelClasses = classMap({\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n return html`\n <input\n id=\"input\"\n type=\"radio\"\n class=\"${prefix}--radio-button\"\n .checked=${checked}\n ?disabled=\"${disabledItem || disabled}\"\n name=${ifDefined(name)}\n value=${ifDefined(value)} />\n <label for=\"input\" class=\"${prefix}--radio-button__label\">\n <span class=\"${prefix}--radio-button__appearance\"></span>\n <span class=\"${innerLabelClasses}\"><slot>${labelText}</slot></span>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this radio button changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-radio-button-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSRadioButton;\n"],"mappings":"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"}
|
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import { css } from 'lit';
|
|
10
10
|
export default css([
|
|
11
|
-
"@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item,:host(cds-radio-button),:host(cds-radio-button-skeleton){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;right:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;right:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(:focus),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(:focus),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 1rem .5rem 2.5rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group,:host(cds-radio-button-group){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;position:relative;display:flex;align-items:center}.cds--radio-button-group *,.cds--radio-button-group ::after,.cds--radio-button-group ::before,:host(cds-radio-button-group) *,:host(cds-radio-button-group) ::after,:host(cds-radio-button-group) ::before{box-sizing:inherit}.cds--label+.cds--form-item .cds--radio-button-group,.cds--label+.cds--form-item :host(cds-radio-button-group),.cds--label+:host(cds-radio-button) .cds--radio-button-group,.cds--label+:host(cds-radio-button) :host(cds-radio-button-group),.cds--label+:host(cds-radio-button-skeleton) .cds--radio-button-group,.cds--label+:host(cds-radio-button-skeleton) :host(cds-radio-button-group){margin-top:0}.cds--radio-button-group--vertical,:host(cds-radio-button-group[orientation=vertical]){flex-direction:column;align-items:flex-start}.cds--radio-button-group--vertical.cds--radio-button-group--label-left,:host(:host(cds-radio-button-group[orientation=vertical]cds-radio-button-group[label-position=left])),:host(cds-radio-button-group[label-position=left].cds--radio-button-group--vertical),:host(cds-radio-button-group[orientation=vertical].cds--radio-button-group--label-left){align-items:flex-end}.cds--radio-button-group--vertical .cds--radio-button__label,:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label{margin-left:0;line-height:1.25}.cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label:not(:last-of-type){margin-bottom:.5rem}.cds--radio-button{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap;visibility:inherit}.cds--radio-button__label{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;align-items:center;margin-left:1rem;cursor:pointer}.cds--radio-button__appearance{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;width:1.125rem;height:1.125rem;flex-shrink:0;border:1px solid var(--cds-icon-primary,#161616);margin:.0625rem .125rem .125rem .5rem;background-color:transparent;border-radius:50%}.cds--radio-button__appearance *,.cds--radio-button__appearance ::after,.cds--radio-button__appearance ::before{box-sizing:inherit}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance{display:flex;align-items:center;justify-content:center;border-color:var(--cds-icon-primary,#161616)}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{position:relative;display:inline-block;width:100%;height:100%;background-color:var(--cds-icon-primary,#161616);border-radius:50%;content:\"\";transform:scale(.5)}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{fill:ButtonText;background-color:ButtonText}}.cds--radio-button:disabled+.cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance::before,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance::before{background-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button__label{cursor:default}.cds--radio-button-group--readonly .cds--radio-button__label-text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.cds--radio-button:focus+.cds--radio-button__label .cds--radio-button__appearance{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1.5px}.cds--radio-button__label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:6.25rem;height:1.125rem}.cds--radio-button__label.cds--skeleton:active,.cds--radio-button__label.cds--skeleton:focus,.cds--radio-button__label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--radio-button__label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--radio-button__label.cds--skeleton::before{animation:none}}.cds--radio-button__label.cds--skeleton .cds--radio-button__appearance{display:none}.cds--radio-button-wrapper .cds--radio-button__label,:host(cds-radio-button) .cds--radio-button__label{display:flex;align-items:flex-start;justify-content:center;margin:0}.cds--radio-button-wrapper:not(:last-of-type),:host(cds-radio-button:not(:last-of-type)){margin-left:1rem}.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type),.cds--radio-button-group--vertical :host(cds-radio-button:not(:last-of-type)),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button-wrapper:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) :host(cds-radio-button:not(:last-of-type)){margin-left:0;margin-bottom:.5rem}.cds--radio-button-group--label-right .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label,:host(cds-radio-button.cds--radio-button-wrapper--label-right) .cds--radio-button__label{flex-direction:row}.cds--radio-button-group--label-left .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__label,:host(cds-radio-button.cds--radio-button-wrapper--label-left) .cds--radio-button__label{flex-direction:row-reverse}.cds--radio-button-group--label-left .cds--radio-button__appearance,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__appearance,:host(cds-radio-button.cds--radio-button-wrapper--label-left) .cds--radio-button__appearance{margin-left:0;margin-right:.5rem}:host(cds-radio-button){outline:0}:host(cds-radio-button) .cds--radio-button__label{flex-direction:row}:host(cds-radio-button[disabled]) .cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}:host(cds-radio-button[disabled]) .cds--radio-button__appearance{border-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[disabled]) .cds--radio-button__appearance::before{background-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[label-position=left]) .cds--radio-button__label{flex-direction:row-reverse}:host(cds-radio-button[label-position=left]) .cds--radio-button__appearance{margin-left:0;margin-right:.5rem}",
|
|
11
|
+
"@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;right:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;right:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 1rem .5rem 2.5rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group,:host(cds-radio-button-group){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;position:relative;display:flex;align-items:center}.cds--radio-button-group *,.cds--radio-button-group ::after,.cds--radio-button-group ::before,:host(cds-radio-button-group) *,:host(cds-radio-button-group) ::after,:host(cds-radio-button-group) ::before{box-sizing:inherit}.cds--label+.cds--form-item .cds--radio-button-group,.cds--label+.cds--form-item :host(cds-radio-button-group){margin-top:0}.cds--radio-button-group--vertical,:host(cds-radio-button-group[orientation=vertical]){flex-direction:column;align-items:flex-start}.cds--radio-button-group--vertical.cds--radio-button-group--label-left,:host(:host(cds-radio-button-group[orientation=vertical]cds-radio-button-group[label-position=left])),:host(cds-radio-button-group[label-position=left].cds--radio-button-group--vertical),:host(cds-radio-button-group[orientation=vertical].cds--radio-button-group--label-left){align-items:flex-end}.cds--radio-button-group--vertical .cds--radio-button__label,:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label{margin-left:0;line-height:1.25}.cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button__label:not(:last-of-type){margin-bottom:.5rem}.cds--radio-button{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap;visibility:inherit}.cds--radio-button__label{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;align-items:center;margin-left:1rem;cursor:pointer}.cds--radio-button__appearance{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;width:1.125rem;height:1.125rem;flex-shrink:0;border:1px solid var(--cds-icon-primary,#161616);margin:.0625rem .125rem .125rem .5rem;background-color:transparent;border-radius:50%}.cds--radio-button__appearance *,.cds--radio-button__appearance ::after,.cds--radio-button__appearance ::before{box-sizing:inherit}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance{display:flex;align-items:center;justify-content:center;border-color:var(--cds-icon-primary,#161616)}.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{position:relative;display:inline-block;width:100%;height:100%;background-color:var(--cds-icon-primary,#161616);border-radius:50%;content:\"\";transform:scale(.5)}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--radio-button:checked+.cds--radio-button__label .cds--radio-button__appearance::before{fill:ButtonText;background-color:ButtonText}}.cds--radio-button:disabled+.cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button:disabled+.cds--radio-button__label .cds--radio-button__appearance::before,.cds--radio-button:disabled:checked+.cds--radio-button__label .cds--radio-button__appearance::before{background-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button+.cds--radio-button__label .cds--radio-button__appearance,:host(cds-radio-button[readOnly]) .cds--radio-button+.cds--radio-button__label .cds--radio-button__appearance{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--radio-button-group--readonly .cds--radio-button__label,:host(cds-radio-button[readOnly]) .cds--radio-button__label{cursor:default}.cds--radio-button-group--readonly .cds--radio-button__label-text,:host(cds-radio-button[readOnly]) .cds--radio-button__label-text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.cds--radio-button:focus+.cds--radio-button__label .cds--radio-button__appearance{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1.5px}.cds--radio-button__label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:6.25rem;height:1.125rem}.cds--radio-button__label.cds--skeleton:active,.cds--radio-button__label.cds--skeleton:focus,.cds--radio-button__label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--radio-button__label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--radio-button__label.cds--skeleton::before{animation:none}}.cds--radio-button__label.cds--skeleton .cds--radio-button__appearance{display:none}.cds--radio-button-wrapper .cds--radio-button__label,:host(cds-radio-button) .cds--radio-button__label{display:flex;align-items:flex-start;justify-content:center;margin:0}.cds--radio-button-wrapper:not(:last-of-type),:host(cds-radio-button:not(:last-of-type)){margin-left:1rem}.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type),.cds--radio-button-group--vertical :host(cds-radio-button:not(:last-of-type)),:host(cds-radio-button-group[orientation=vertical]) .cds--radio-button-wrapper:not(:last-of-type),:host(cds-radio-button-group[orientation=vertical]) :host(cds-radio-button:not(:last-of-type)){margin-left:0;margin-bottom:.5rem}.cds--radio-button-group--label-right .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label,:host(cds-radio-button.cds--radio-button-wrapper--label-right) .cds--radio-button__label{flex-direction:row}.cds--radio-button-group--label-left .cds--radio-button__label,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__label,:host(cds-radio-button.cds--radio-button-wrapper--label-left) .cds--radio-button__label{flex-direction:row-reverse}.cds--radio-button-group--label-left .cds--radio-button__appearance,.cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance,:host(cds-radio-button-group[label-position=left]) .cds--radio-button__appearance,:host(cds-radio-button.cds--radio-button-wrapper--label-left) .cds--radio-button__appearance{margin-left:0;margin-right:.5rem}:host(cds-radio-button){outline:0}:host(cds-radio-button) .cds--radio-button__label{flex-direction:row}:host(cds-radio-button[disabledItem]) .cds--radio-button__label,:host(cds-radio-button[disabled]) .cds--radio-button__label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}:host(cds-radio-button[disabledItem]) .cds--radio-button__appearance,:host(cds-radio-button[disabled]) .cds--radio-button__appearance{border-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[disabledItem]) .cds--radio-button__appearance::before,:host(cds-radio-button[disabled]) .cds--radio-button__appearance::before{background-color:var(--cds-border-disabled,#c6c6c6)}:host(cds-radio-button[label-position=left]) .cds--radio-button__label{flex-direction:row-reverse}:host(cds-radio-button[label-position=left]) .cds--radio-button__appearance{margin-left:0;margin-right:.5rem}",
|
|
12
12
|
]);
|