@politiet/sheriff-web-components 2.0.0-beta.1 → 2.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/frameworks/react.d.ts +1 -1
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/react-wrappers/SDSTextAreaWrapper.d.ts +2 -2
- package/dist/react-wrappers/SDSTextAreaWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSTextAreaWrapper.js +2 -2
- package/dist/react-wrappers/SDSTextAreaWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.d.ts +6 -5
- package/dist/react-wrappers/SDSTextFieldWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -1
- package/dist/react-wrappers/index.d.ts +2 -0
- package/dist/react-wrappers/index.d.ts.map +1 -1
- package/dist/react-wrappers/index.js +2 -0
- package/dist/react-wrappers/index.js.map +1 -1
- package/dist/sds-alert/sds-alert.d.ts +6 -4
- package/dist/sds-alert/sds-alert.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.js +11 -6
- package/dist/sds-alert/sds-alert.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +56 -69
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.d.ts +1 -4
- package/dist/sds-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +3 -14
- package/dist/sds-button/sds-button.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +35 -61
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-card/sds-card.styles.js +5 -5
- package/dist/sds-card/sds-card.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +1 -0
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +35 -26
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +4 -0
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
- package/dist/sds-chip/sds-chip.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.js +10 -1
- package/dist/sds-chip/sds-chip.js.map +1 -1
- package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.styles.js +26 -25
- package/dist/sds-chip/sds-chip.styles.js.map +1 -1
- package/dist/sds-detail/sds-detail.styles.js +2 -2
- package/dist/sds-detail/sds-detail.styles.js.map +1 -1
- package/dist/sds-icon/sds-icon-loader.d.ts +2 -0
- package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon-loader.js +9 -0
- package/dist/sds-icon/sds-icon-loader.js.map +1 -1
- package/dist/sds-icon/sds-icon.d.ts +1 -1
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.js +0 -1
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sds-icon/sds-icon.system.d.ts +6 -0
- package/dist/sds-icon/sds-icon.system.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.system.js +24 -0
- package/dist/sds-icon/sds-icon.system.js.map +1 -0
- package/dist/sds-label/sds-label.styles.js +2 -2
- package/dist/sds-label/sds-label.styles.js.map +1 -1
- package/dist/sds-link/sds-link.styles.js +6 -6
- package/dist/sds-link/sds-link.styles.js.map +1 -1
- package/dist/sds-loader/sds-loader.d.ts +2 -3
- package/dist/sds-loader/sds-loader.d.ts.map +1 -1
- package/dist/sds-loader/sds-loader.js +4 -17
- package/dist/sds-loader/sds-loader.js.map +1 -1
- package/dist/sds-loader/sds-loader.styles.d.ts.map +1 -1
- package/dist/sds-loader/sds-loader.styles.js +12 -17
- package/dist/sds-loader/sds-loader.styles.js.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.styles.d.ts.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.styles.js +25 -18
- package/dist/sds-nav-card/sds-nav-card.styles.js.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.styles.js +2 -2
- package/dist/sds-paragraph/sds-paragraph.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +11 -11
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +7 -5
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +24 -20
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts +9 -6
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +42 -25
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.js +4 -0
- package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
- package/dist/sds-switch/sds-switch.d.ts.map +1 -1
- package/dist/sds-switch/sds-switch.js +1 -0
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-switch/sds-switch.styles.js +2 -2
- package/dist/sds-switch/sds-switch.styles.js.map +1 -1
- package/dist/sds-tag/sds-tag.d.ts +1 -4
- package/dist/sds-tag/sds-tag.d.ts.map +1 -1
- package/dist/sds-tag/sds-tag.js +0 -4
- package/dist/sds-tag/sds-tag.js.map +1 -1
- package/dist/sds-tag/sds-tag.styles.d.ts.map +1 -1
- package/dist/sds-tag/sds-tag.styles.js +12 -38
- package/dist/sds-tag/sds-tag.styles.js.map +1 -1
- package/dist/sds-text/sds-text.d.ts +1 -1
- package/dist/sds-text/sds-text.d.ts.map +1 -1
- package/dist/sds-text/sds-text.js.map +1 -1
- package/dist/sds-text/sds-text.styles.js +1 -1
- package/dist/sds-text/sds-text.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts +17 -17
- package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.js +4 -2
- package/dist/sds-textarea/sds-textarea.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.spec.js +24 -17
- package/dist/sds-textarea/sds-textarea.spec.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +8 -2
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts +17 -21
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +19 -3
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.js +20 -11
- package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +374 -350
- package/dist/utils/renderErrorMessage.js +1 -1
- package/package.json +143 -143
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, --sds-color-neutral-surface-default);\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-radio-check-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-accent-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-label-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-default));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-default));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M13.1678 4.91802C13.5583 4.52749 14.1913 4.52749 14.5819 4.91802C14.9724 5.30854 14.9724 5.94156 14.5819 6.33208L8.20686 12.7071C8.01933 12.8946 7.76501 13 7.49983 13C7.23464 13 6.98032 12.8946 6.79279 12.7071L3.41779 9.33208C3.0273 8.94158 3.02735 8.30855 3.41779 7.91802C3.78391 7.5519 4.36291 7.52931 4.75569 7.84966L4.83186 7.91802L7.49983 10.586L13.1678 4.91802Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-hover));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-active));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\ttransform: translate(-3px, -3px);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\ttransform: translate(-1px, -1px);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -82,7 +82,7 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
|
|
|
82
82
|
<div class="sds-checkbox-group__checkboxes" @change=${this._handleCheckboxChange}>
|
|
83
83
|
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
84
84
|
</div>
|
|
85
|
-
${this.errorMessage ? html `<sds-alert variant="secondary"
|
|
85
|
+
${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
|
|
86
86
|
</fieldset>
|
|
87
87
|
`;
|
|
88
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox-group.styles';\nimport { SDS_SIZES } from '../types';\nimport { SDSCheckbox } from '../sds-checkbox/sds-checkbox';\n\ntype CheckboxGroupSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype UpdatableCheckboxProps = 'readOnly' | 'disabled' | 'size' | 'error';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\n\n// Props Interface\nexport interface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\treadonly?: boolean;\n\tdisabled?: boolean;\n\tsize?: CheckboxGroupSize;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) legend?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: String, reflect: true }) size: CheckboxGroupSize = 'md';\n\n\t@state() private _selectedValues: string[] = [];\n\t@query('slot') private _slotElement!: HTMLSlotElement;\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis._selectedValues = isChecked ? [...this._selectedValues, value] : this._selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate _handleSlotChange = () => {\n\t\tthis._updateChildProps(['readOnly', 'disabled', 'size', 'error']);\n\t};\n\n\tprivate _updateChildProps(props: UpdatableCheckboxProps[]) {\n\t\tconst checkboxChildren = this._slotElement.assignedElements({ flatten: true }) as HTMLElement[];\n\n\t\tcheckboxChildren.forEach((child) => {\n\t\t\tif (child instanceof SDSCheckbox) {\n\t\t\t\tprops.forEach((prop) => {\n\t\t\t\t\tif (prop === 'error') {\n\t\t\t\t\t\tchild.error = Boolean(this.errorMessage);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t(child as any)[prop] = (this as any)[prop];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\toverride updated(changedProps: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProps);\n\n\t\tif (changedProps.has('readonly')) {\n\t\t\tthis._updateChildProps(['readOnly']);\n\t\t}\n\t\tif (changedProps.has('disabled')) {\n\t\t\tthis._updateChildProps(['disabled']);\n\t\t}\n\t\tif (changedProps.has('size')) {\n\t\t\tthis._updateChildProps(['size']);\n\t\t}\n\t\tif (changedProps.has('errorMessage')) {\n\t\t\tthis._updateChildProps(['error']);\n\t\t}\n\t}\n\n\tget value(): {} {\n\t\treturn { selectedValues: this._selectedValues };\n\t}\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--disabled': this.disabled,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend\n\t\t\t\t\t? html`<legend class=\"sds-checkbox-group__legend\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"md\"></sds-icon>` : nothing}</sds-icon>${this.legend}</legend>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\" @change=${this._handleCheckboxChange}>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox-group': SDSCheckboxGroup;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4FlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-group-legend-font-weight: var(--sds-checkbox-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-checkbox-group {\n\t\tborder: 0;\n\t\tcolor: var(--_sds-checkbox-group-text-color);\n\t\tfont-family: var(--_sds-checkbox-group-font-family);\n\t\tfont-size: var(--_sds-checkbox-group-font-size);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-checkbox-group--disabled {\n\t\t.sds-checkbox-group__legend,\n\t\t.sds-checkbox-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-checkbox-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-checkbox-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-checkbox-group-legend-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-legend-line-height);\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\n\t\t+ .sds-checkbox-group__help-text {\n\t\t\tmargin-block-start: var(--_sds-checkbox-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-checkbox-group__help-text {\n\t\tcolor: var(--_sds-checkbox-group-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-group-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-help-text-line-height);\n\t\tmargin: 0;\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\t}\n\n\t.sds-checkbox-group__checkboxes {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-checkbox-group-gap);\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtF,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,OAAO,EAAE,WAAW,CAAgB;IACpC,IAAI,EAAE,QAAQ,CAAQ;IACrB,OAAO,UAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAS1B,iBAAiB;IAMR,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;
|
|
1
|
+
{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtF,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,OAAO,EAAE,WAAW,CAAgB;IACpC,IAAI,EAAE,QAAQ,CAAQ;IACrB,OAAO,UAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAS1B,iBAAiB;IAMR,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IAgCf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAatB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAQtB;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAUxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -95,7 +95,16 @@ let SDSChip = class SDSChip extends LitElement {
|
|
|
95
95
|
</button>`;
|
|
96
96
|
}
|
|
97
97
|
return html `<label class="${classMap(chipClasses)}" @click="${this._toggle}" @keyup="${this._keypress}">
|
|
98
|
-
<input
|
|
98
|
+
<input
|
|
99
|
+
id="control"
|
|
100
|
+
type="checkbox"
|
|
101
|
+
name="${ifDefined(this.name)}"
|
|
102
|
+
value="${ifDefined(this.value)}"
|
|
103
|
+
.checked="${this.checked}"
|
|
104
|
+
?checked="${this.checked}"
|
|
105
|
+
?disabled="${this.disabled}"
|
|
106
|
+
?readonly="${this.readonly}"
|
|
107
|
+
/>
|
|
99
108
|
<slot></slot>
|
|
100
109
|
</label>`;
|
|
101
110
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,sBAAsB,CAAC;AAkBvB,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAoBtC;QACC,KAAK,EAAE,CAAC;QAdT,iBAAiB;QAC0B,YAAO,GAAgB,YAAY,CAAC;QACpC,SAAI,GAAa,IAAI,CAAC;QACrB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAIrD,oBAAe,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-chip.styles';\nimport { SDS_SIZES } from '../types';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSChipProps {\n\tvariant?: ChipVariant;\n\tsize?: ChipSize;\n\tchecked?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tonChange?: (event: CustomEvent<{ value: string | undefined; isChecked: boolean }>) => void;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: ChipVariant = 'selectable';\n\t@property({ type: String, reflect: true }) size: ChipSize = 'md';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) readonly = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst isRemovableVariant = this.variant === 'removable' && !this.readonly && !this.disabled;\n\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small' || this.size === 'sm',\n\t\t\t'sds-chip--large': this.size === 'large' || this.size === 'lg',\n\t\t\t'sds-chip--removable': isRemovableVariant,\n\t\t};\n\n\t\tif (isRemovableVariant) {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove} @keyup=\"${this._keypress}\">\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\" @keyup=\"${this._keypress}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?readonly=\"${this.readonly}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (this.disabled || this.readonly) return;\n\t\tthis.checked = !this.checked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tif (this.disabled || this.readonly) return;\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _keypress = (event: KeyboardEvent) => {\n\t\tif (![' ', 'Enter'].includes(event.key)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'removable') {\n\t\t\tthis._remove();\n\t\t} else {\n\t\t\tthis._toggle(event);\n\t\t}\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.styles.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-chip.styles.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4IlB,CAAC"}
|
|
@@ -10,7 +10,7 @@ export const styles = css `
|
|
|
10
10
|
--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));
|
|
11
11
|
--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
|
|
12
12
|
|
|
13
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
13
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));
|
|
14
14
|
--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));
|
|
15
15
|
--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));
|
|
16
16
|
|
|
@@ -19,45 +19,46 @@ export const styles = css `
|
|
|
19
19
|
--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));
|
|
20
20
|
--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));
|
|
21
21
|
|
|
22
|
-
--_sds-chip-disabled-opacity: var(--sds-
|
|
22
|
+
--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));
|
|
23
23
|
|
|
24
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
25
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-
|
|
24
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));
|
|
25
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));
|
|
26
26
|
|
|
27
27
|
display: inline-block;
|
|
28
28
|
box-sizing: border-box;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
:host(
|
|
31
|
+
:host([disabled]) {
|
|
32
32
|
opacity: var(--_sds-chip-disabled-opacity);
|
|
33
33
|
cursor: not-allowed;
|
|
34
34
|
pointer-events: none;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
:host(:hover) {
|
|
38
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
39
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
40
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-secondary-action-contrast-default));
|
|
38
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));
|
|
39
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
:host(:active) {
|
|
44
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
45
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
43
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));
|
|
44
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
:host([checked]) {
|
|
49
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
50
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
51
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-
|
|
48
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
|
|
49
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
50
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
52
51
|
}
|
|
53
52
|
|
|
54
53
|
:host([checked]:hover) {
|
|
55
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
56
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-
|
|
54
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
|
|
55
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
56
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
:host([checked]:active) {
|
|
60
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
60
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
|
|
61
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
:host([size='sm']) {
|
|
@@ -109,20 +110,20 @@ export const styles = css `
|
|
|
109
110
|
}
|
|
110
111
|
|
|
111
112
|
&.sds-chip--removable {
|
|
112
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
113
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-
|
|
114
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
113
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
|
|
114
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
115
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
115
116
|
|
|
116
117
|
&:hover {
|
|
117
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
118
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-
|
|
119
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
118
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
|
|
119
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
120
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
&:active {
|
|
123
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-
|
|
124
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-
|
|
125
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-
|
|
124
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
|
|
125
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
126
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -5,10 +5,10 @@ export const styles = css `
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.sds-detail {
|
|
8
|
-
font-family: var(--sds-typography-
|
|
8
|
+
font-family: var(--sds-typography-font-family);
|
|
9
9
|
font-size: 0.75rem;
|
|
10
10
|
line-height: 1.333;
|
|
11
|
-
color: var(--sds-color-
|
|
11
|
+
color: var(--sds-color-semantic-text-default);
|
|
12
12
|
margin: 0;
|
|
13
13
|
max-width: var(--sds-typography-max-line-width);
|
|
14
14
|
padding: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-detail.styles.js","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-detail {\n\t\tfont-family: var(--sds-typography-
|
|
1
|
+
{"version":3,"file":"sds-detail.styles.js","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-detail {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 0.75rem;\n\t\tline-height: 1.333;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-detail--text {\n\t\tfont-weight: 400;\n\t}\n\n\t.sds-detail--label {\n\t\tfont-weight: 500;\n\t}\n`;\n"]}
|
|
@@ -2,8 +2,10 @@ export type IconPromise = (iconName: string) => Promise<string>;
|
|
|
2
2
|
export declare class SDSIconLoader {
|
|
3
3
|
private cache;
|
|
4
4
|
private _loadLocal;
|
|
5
|
+
private _disableSystemIcons;
|
|
5
6
|
get loadLocal(): boolean;
|
|
6
7
|
set loadLocal(value: boolean);
|
|
8
|
+
set disableSystemIcons(value: boolean);
|
|
7
9
|
resolver: IconPromise;
|
|
8
10
|
resolve(name: string, onResolved: (svg: string) => void): void;
|
|
9
11
|
clear(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAmBhE,qBAAa,aAAa;IACzB,OAAO,CAAC,KAAK,CAA+C;IAC5D,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAkB;IAE7C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED,IAAI,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAEpC;IAED,QAAQ,EAAE,WAAW,CAAmD;IAExE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;IA2B9D,KAAK,IAAI,IAAI;IAIb,IAAI,aAAa,IAAI,WAAW,CAE/B;CACD"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isSystemIcon, systemIcons } from './sds-icon.system';
|
|
1
2
|
const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${name}.js`)
|
|
2
3
|
.then(({ default: svg }) => {
|
|
3
4
|
return svg;
|
|
@@ -15,6 +16,7 @@ export class SDSIconLoader {
|
|
|
15
16
|
constructor() {
|
|
16
17
|
this.cache = new Map();
|
|
17
18
|
this._loadLocal = false;
|
|
19
|
+
this._disableSystemIcons = false;
|
|
18
20
|
this.resolver = this._loadLocal ? loadLocalIcons : loadCdnIcons;
|
|
19
21
|
}
|
|
20
22
|
get loadLocal() {
|
|
@@ -24,7 +26,14 @@ export class SDSIconLoader {
|
|
|
24
26
|
this._loadLocal = value;
|
|
25
27
|
this.resolver = value ? loadLocalIcons : loadCdnIcons;
|
|
26
28
|
}
|
|
29
|
+
set disableSystemIcons(value) {
|
|
30
|
+
this._disableSystemIcons = value;
|
|
31
|
+
}
|
|
27
32
|
resolve(name, onResolved) {
|
|
33
|
+
if (!this._disableSystemIcons && isSystemIcon(name)) {
|
|
34
|
+
onResolved(systemIcons[name]);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
28
37
|
let cached = this.cache.get(name);
|
|
29
38
|
if (typeof cached === 'string') {
|
|
30
39
|
onResolved(cached);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAI9D,MAAM,cAAc,GAAgB,CAAC,IAAY,EAAE,EAAE,CACpD,MAAM,CAAC,uCAAuC,IAAI,KAAK,CAAC;KACtD,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAC;AACZ,CAAC,CAAC;KACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IAChB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACpB,CAAC,CAAC,CAAC;AAEL,MAAM,YAAY,GAAgB,CAAC,IAAY,EAAE,EAAE,CAClD,KAAK,CAAC,oEAAoE,IAAI,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;IACvG,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QAClB,MAAM,IAAI,SAAS,CAAC,2BAA2B,IAAI,GAAG,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;AACxB,CAAC,CAAC,CAAC;AAEJ,MAAM,OAAO,aAAa;IAA1B;QACS,UAAK,GAAG,IAAI,GAAG,EAAoC,CAAC;QACpD,eAAU,GAAY,KAAK,CAAC;QAC5B,wBAAmB,GAAY,KAAK,CAAC;QAe7C,aAAQ,GAAgB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAoCzE,CAAC;IAjDA,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC;IACxB,CAAC;IAED,IAAI,SAAS,CAAC,KAAc;QAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IACvD,CAAC;IAED,IAAI,kBAAkB,CAAC,KAAc;QACpC,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;IAClC,CAAC;IAID,OAAO,CAAC,IAAY,EAAE,UAAiC;QACtD,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;YACrD,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;YAC9B,OAAO;QACR,CAAC;QAED,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;YAChC,UAAU,CAAC,MAAM,CAAC,CAAC;YACnB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAC;YACb,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;iBAC1B,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;iBACf,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;gBAC1B,OAAO,GAAG,CAAC;YACZ,CAAC,CAAC,CAAC;YAEJ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAC9B,CAAC;QAED,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzB,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACpB,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;CACD","sourcesContent":["import { isSystemIcon, systemIcons } from './sds-icon.system';\n\nexport type IconPromise = (iconName: string) => Promise<string>;\n\nconst loadLocalIcons: IconPromise = (name: string) =>\n\timport(`@politiet/sheriff-icons/dist/assets/${name}.js`)\n\t\t.then(({ default: svg }) => {\n\t\t\treturn svg;\n\t\t})\n\t\t.catch((error) => {\n\t\t\tconsole.log(error);\n\t\t});\n\nconst loadCdnIcons: IconPromise = (name: string) =>\n\tfetch(`https://cdn.jsdelivr.net/npm/@politiet/sheriff-icons/dist/assets/${name}.svg`).then((response) => {\n\t\tif (!response.ok) {\n\t\t\tthrow new TypeError(`Sheriff: unknown icon: '${name}'`);\n\t\t}\n\t\treturn response.text();\n\t});\n\nexport class SDSIconLoader {\n\tprivate cache = new Map<string, string | Promise<string>>();\n\tprivate _loadLocal: boolean = false;\n\tprivate _disableSystemIcons: boolean = false;\n\n\tget loadLocal(): boolean {\n\t\treturn this._loadLocal;\n\t}\n\n\tset loadLocal(value: boolean) {\n\t\tthis._loadLocal = value;\n\t\tthis.resolver = value ? loadLocalIcons : loadCdnIcons;\n\t}\n\n\tset disableSystemIcons(value: boolean) {\n\t\tthis._disableSystemIcons = value;\n\t}\n\n\tresolver: IconPromise = this._loadLocal ? loadLocalIcons : loadCdnIcons;\n\n\tresolve(name: string, onResolved: (svg: string) => void): void {\n\t\tif (!this._disableSystemIcons && isSystemIcon(name)) {\n\t\t\tonResolved(systemIcons[name]);\n\t\t\treturn;\n\t\t}\n\n\t\tlet cached = this.cache.get(name);\n\n\t\tif (typeof cached === 'string') {\n\t\t\tonResolved(cached);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!cached) {\n\t\t\tcached = this.resolver(name)\n\t\t\t\t.catch(() => '')\n\t\t\t\t.then((svg) => {\n\t\t\t\t\tthis.cache.set(name, svg);\n\t\t\t\t\treturn svg;\n\t\t\t\t});\n\n\t\t\tthis.cache.set(name, cached);\n\t\t}\n\n\t\tcached.then(onResolved);\n\t}\n\n\tclear(): void {\n\t\tthis.cache.clear();\n\t}\n\n\tget currentLoader(): IconPromise {\n\t\treturn this.resolver;\n\t}\n}\n"]}
|
|
@@ -14,7 +14,7 @@ export declare class SDSIcon extends LitElement {
|
|
|
14
14
|
static setLoadLocal(loadLocal: boolean): void;
|
|
15
15
|
static registerResolver(resolver: IconPromise): void;
|
|
16
16
|
name: string;
|
|
17
|
-
size
|
|
17
|
+
size?: 's' | 'm' | IconSizes;
|
|
18
18
|
color: string;
|
|
19
19
|
label: string;
|
|
20
20
|
private svg;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxD,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AACD,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAAY;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAEzD,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAI7C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAIT,IAAI,EAAE,MAAM,CAAM;IAClB,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxD,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AACD,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAAY;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAEzD,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAI7C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAIT,IAAI,EAAE,MAAM,CAAM;IAClB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAM;IACnB,KAAK,EAAE,MAAM,CAAM;IAErD,OAAO,CAAC,GAAG,CAAc;IAEzB,MAAM;IAQf;;;;OAIG;YACW,SAAS;IAWd,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAMjF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAoB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAWpC,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAaqC,SAAI,GAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-icon.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAoB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAWpC,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAaqC,SAAI,GAAW,EAAE,CAAC;QAElB,UAAK,GAAW,EAAE,CAAC;QACnB,UAAK,GAAW,EAAE,CAAC;QAE7C,QAAG,GAAW,EAAE,CAAC;IAgCnC,CAAC;IA7CA,MAAM,CAAC,YAAY,CAAC,SAAkB;QACrC,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,QAAqB;QAC5C,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACrC,CAAC;IASQ,MAAM;QACd,OAAO,IAAI,CAAA;iCACoB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;MAC/K,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC;;GAEpH,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,SAAS;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QACD,MAAM,GAAG,GAAG,MAAM,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;YACjD,SAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IAChB,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChD,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;;AAhDe,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEV,kBAAU,GAAG,IAAI,aAAa,EAAE,AAAtB,CAAuB;AAUd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAmB;AAClB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA8B;AAC7B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAoB;AACnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAoB;AAE7C;IAAhB,KAAK,EAAE;oCAA0B;AAlBtB,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CAkDnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { SDSIconLoader, type IconPromise } from './sds-icon-loader';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-icon.styles';\nimport { SDS_SIZES } from '../types';\n\ntype IconSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\nexport interface SDSIconProps {\n\tname?: string;\n\tsize?: 's' | 'm' | IconSizes;\n\tcolor?: string;\n\tlabel?: string;\n}\n@guardedCustomElement('sds-icon')\nexport class SDSIcon extends LitElement {\n\tstatic override styles = [styles];\n\n\tprivate static readonly iconLoader = new SDSIconLoader();\n\n\tstatic setLoadLocal(loadLocal: boolean): void {\n\t\tthis.iconLoader.loadLocal = loadLocal;\n\t}\n\n\tstatic registerResolver(resolver: IconPromise): void {\n\t\tthis.iconLoader.resolver = resolver;\n\t}\n\n\t@property({ type: String, reflect: true }) name: string = '';\n\t@property({ type: String, reflect: true }) size?: 's' | 'm' | IconSizes;\n\t@property({ type: String, reflect: true }) color: string = '';\n\t@property({ type: String, reflect: true }) label: string = '';\n\n\t@state() private svg: string = '';\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"sds-icon\" role=\"${ifDefined(this.label ? 'img' : undefined)}\" style=\"${ifDefined(this.color ? `color:${this.color}` : undefined)}\" aria-label=\"${ifDefined(this.label)}\">\n\t\t\t\t${this.name ? html`<slot aria-hidden=\"true\">${unsafeSVG(this.svg)}</slot>` : html`<slot aria-hidden=\"true\"></slot>`}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/**\n\t * Wraps the icon loader's callback in a promise. Even if the loader\n\t * calls the callback synchronously, awaiting the promise defers the\n\t * property update to the next microtask.\n\t */\n\tprivate async fetchIcon() {\n\t\tif (!this.name) {\n\t\t\tthis.svg = '';\n\t\t\treturn;\n\t\t}\n\t\tconst svg = await new Promise<string>((resolve) => {\n\t\t\tSDSIcon.iconLoader.resolve(this.name, resolve);\n\t\t});\n\t\tthis.svg = svg;\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('name') && this.name) {\n\t\t\tvoid this.fetchIcon();\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-icon': SDSIcon;\n\t}\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ICON_NAMES } from './sds-icon-names';
|
|
2
|
+
export type SystemIcon = Extract<(typeof ICON_NAMES)[number], (typeof SYSTEM_ICONS)[number]>;
|
|
3
|
+
export declare const SYSTEM_ICONS: readonly ["arrow_forward-material-outlined", "check_circle-material-filled", "close-material-outlined", "dangerous-material-filled", "InformationSquareFill-aksel-filled", "lock-material-filled", "search-material-filled", "warning-material-filled"];
|
|
4
|
+
export declare const isSystemIcon: (name: string) => name is SystemIcon;
|
|
5
|
+
export declare const systemIcons: Record<SystemIcon, string>;
|
|
6
|
+
//# sourceMappingURL=sds-icon.system.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-icon.system.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7F,eAAO,MAAM,YAAY,yPASf,CAAC;AAEX,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,IAAI,IAAI,UAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CASlD,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export const SYSTEM_ICONS = [
|
|
2
|
+
'arrow_forward-material-outlined',
|
|
3
|
+
'check_circle-material-filled',
|
|
4
|
+
'close-material-outlined',
|
|
5
|
+
'dangerous-material-filled',
|
|
6
|
+
'InformationSquareFill-aksel-filled',
|
|
7
|
+
'lock-material-filled',
|
|
8
|
+
'search-material-filled',
|
|
9
|
+
'warning-material-filled',
|
|
10
|
+
];
|
|
11
|
+
export const isSystemIcon = (name) => {
|
|
12
|
+
return SYSTEM_ICONS.includes(name);
|
|
13
|
+
};
|
|
14
|
+
export const systemIcons = {
|
|
15
|
+
'arrow_forward-material-outlined': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M662.82-440.39H145.87v-79.22h516.95L423.87-758.57 480-814.7 814.7-480 480-145.87l-56.13-55.56z"/></svg>`,
|
|
16
|
+
'check_circle-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="m419.87-289.52 289.22-289.22-57.31-56.87L419.87-403.7 304.96-518.61l-56.31 56.87zm60.21 223.65q-85.47 0-161.01-32.39-75.53-32.4-131.97-88.84T98.26-318.99q-32.39-75.46-32.39-160.93 0-86.47 32.39-162.01 32.4-75.53 88.75-131.5t131.85-88.62 161.01-32.65q86.52 0 162.12 32.61 75.61 32.6 131.53 88.5 55.93 55.89 88.55 131.45Q894.7-566.58 894.7-480q0 85.55-32.65 161.07-32.65 75.53-88.62 131.9T642.01-98.26q-75.46 32.39-161.93 32.39"/></svg>`,
|
|
17
|
+
'close-material-outlined': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M249-193.43 193.43-249l231-231-231-231L249-766.57l231 231 231-231L766.57-711l-231 231 231 231L711-193.43l-231-231z"/></svg>`,
|
|
18
|
+
'dangerous-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M324.35-105.87 105.87-324.35v-311.87L324.35-854.7h311.87L854.7-636.22v311.87L636.22-105.87zm34.91-206.87L480-433.48l120.74 120.74 47.09-46.52L526.52-480l121.31-120.74-47.09-47.09L480-526.52 359.26-647.83l-46.52 47.09L433.48-480 312.74-359.26z"/></svg>`,
|
|
19
|
+
'InformationSquareFill-aksel-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>`,
|
|
20
|
+
'lock-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z"/></svg>`,
|
|
21
|
+
'search-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53"/></svg>`,
|
|
22
|
+
'warning-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z"/></svg>`,
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=sds-icon.system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-icon.system.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,iCAAiC;IACjC,8BAA8B;IAC9B,yBAAyB;IACzB,2BAA2B;IAC3B,oCAAoC;IACpC,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;CAChB,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAY,EAAsB,EAAE;IAChE,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAkB,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B;IACtD,iCAAiC,EAAE,uMAAuM;IAC1O,8BAA8B,EAAE,khBAAkhB;IACljB,yBAAyB,EAAE,2NAA2N;IACtP,2BAA2B,EAAE,2VAA2V;IACxX,oCAAoC,EAAE,wZAAwZ;IAC9b,sBAAsB,EAAE,ikBAAikB;IACzlB,wBAAwB,EAAE,4eAA4e;IACtgB,yBAAyB,EAAE,8TAA8T;CACzV,CAAC","sourcesContent":["import { ICON_NAMES } from './sds-icon-names';\n\nexport type SystemIcon = Extract<(typeof ICON_NAMES)[number], (typeof SYSTEM_ICONS)[number]>;\n\nexport const SYSTEM_ICONS = [\n\t'arrow_forward-material-outlined',\n\t'check_circle-material-filled',\n\t'close-material-outlined',\n\t'dangerous-material-filled',\n\t'InformationSquareFill-aksel-filled',\n\t'lock-material-filled',\n\t'search-material-filled',\n\t'warning-material-filled',\n] as const;\n\nexport const isSystemIcon = (name: string): name is SystemIcon => {\n\treturn SYSTEM_ICONS.includes(name as SystemIcon);\n};\n\nexport const systemIcons: Record<SystemIcon, string> = {\n\t'arrow_forward-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M662.82-440.39H145.87v-79.22h516.95L423.87-758.57 480-814.7 814.7-480 480-145.87l-56.13-55.56z\"/></svg>`,\n\t'check_circle-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"m419.87-289.52 289.22-289.22-57.31-56.87L419.87-403.7 304.96-518.61l-56.31 56.87zm60.21 223.65q-85.47 0-161.01-32.39-75.53-32.4-131.97-88.84T98.26-318.99q-32.39-75.46-32.39-160.93 0-86.47 32.39-162.01 32.4-75.53 88.75-131.5t131.85-88.62 161.01-32.65q86.52 0 162.12 32.61 75.61 32.6 131.53 88.5 55.93 55.89 88.55 131.45Q894.7-566.58 894.7-480q0 85.55-32.65 161.07-32.65 75.53-88.62 131.9T642.01-98.26q-75.46 32.39-161.93 32.39\"/></svg>`,\n\t'close-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M249-193.43 193.43-249l231-231-231-231L249-766.57l231 231 231-231L766.57-711l-231 231 231 231L711-193.43l-231-231z\"/></svg>`,\n\t'dangerous-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M324.35-105.87 105.87-324.35v-311.87L324.35-854.7h311.87L854.7-636.22v311.87L636.22-105.87zm34.91-206.87L480-433.48l120.74 120.74 47.09-46.52L526.52-480l121.31-120.74-47.09-47.09L480-526.52 359.26-647.83l-46.52 47.09L433.48-480 312.74-359.26z\"/></svg>`,\n\t'InformationSquareFill-aksel-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"/></svg>`,\n\t'lock-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z\"/></svg>`,\n\t'search-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53\"/></svg>`,\n\t'warning-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z\"/></svg>`,\n};\n"]}
|
|
@@ -5,9 +5,9 @@ export const styles = css `
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.sds-label {
|
|
8
|
-
font-family: var(--sds-typography-
|
|
8
|
+
font-family: var(--sds-typography-font-family);
|
|
9
9
|
font-weight: 500;
|
|
10
|
-
color: var(--sds-color-
|
|
10
|
+
color: var(--sds-color-semantic-text-default);
|
|
11
11
|
margin: 0;
|
|
12
12
|
max-width: var(--sds-typography-max-line-width);
|
|
13
13
|
padding: 0;
|