@rededor/cura 1.6.1-alpha.7 → 1.6.1-alpha.9
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/cjs/app-globals-28c6f5c4.js.map +1 -1
- package/dist/cjs/cura-accordion_18.cjs.entry.js +10 -10
- package/dist/cjs/cura-accordion_18.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-checkbox.cjs.entry.js +4 -2
- package/dist/cjs/cura-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-display.cjs.entry.js +1 -1
- package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
- package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
- package/dist/cjs/cura-modal.cjs.entry.js +15 -2
- package/dist/cjs/cura-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-progress-bar_2.cjs.entry.js +2 -2
- package/dist/cjs/cura-radio.cjs.entry.js +19 -17
- package/dist/cjs/cura-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-stepper.cjs.entry.js +1 -1
- package/dist/cjs/cura-switch.cjs.entry.js +4 -2
- package/dist/cjs/cura-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-toast.cjs.entry.js +1 -1
- package/dist/cjs/cura-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cura-avatar/cura-avatar.js +34 -16
- package/dist/collection/components/cura-avatar/cura-avatar.js.map +1 -1
- package/dist/collection/components/cura-modal/cura-modal.css +3 -2
- package/dist/collection/components/cura-modal/cura-modal.js +14 -1
- package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
- package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
- package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js +1 -1
- package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js +1 -1
- package/dist/collection/components/cura-stepper/cura-stepper.js +1 -1
- package/dist/collection/components/cura-toast/cura-toast.js +1 -1
- package/dist/collection/components/cura-tooltip/cura-tooltip.js +1 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.css +17 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +45 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js.map +1 -1
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js +16 -2
- package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js.map +1 -1
- package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
- package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
- package/dist/collection/components/forms/cura-radio/cura-radio.css +16 -1
- package/dist/collection/components/forms/cura-radio/cura-radio.js +62 -18
- package/dist/collection/components/forms/cura-radio/cura-radio.js.map +1 -1
- package/dist/collection/components/forms/cura-radio/cura-radio.stories.js +17 -4
- package/dist/collection/components/forms/cura-radio/cura-radio.stories.js.map +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.js +3 -3
- package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
- package/dist/collection/components/forms/cura-switch/cura-switch.css +11 -1
- package/dist/collection/components/forms/cura-switch/cura-switch.js +45 -1
- package/dist/collection/components/forms/cura-switch/cura-switch.js.map +1 -1
- package/dist/collection/components/forms/cura-switch/cura-switch.stories.js +16 -2
- package/dist/collection/components/forms/cura-switch/cura-switch.stories.js.map +1 -1
- package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
- package/dist/collection/components/text/cura-display/cura-display.js +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
- package/dist/components/cura-avatar.js +1 -1
- package/dist/components/cura-avatar.js.map +1 -1
- package/dist/components/cura-checkbox.js +6 -2
- package/dist/components/cura-checkbox.js.map +1 -1
- package/dist/components/cura-display.js +1 -1
- package/dist/components/cura-heading2.js +1 -1
- package/dist/components/cura-input-date.js +1 -1
- package/dist/components/cura-label2.js +1 -1
- package/dist/components/cura-loader-bar2.js +1 -1
- package/dist/components/cura-loader-circle2.js +1 -1
- package/dist/components/cura-modal.js +31 -6
- package/dist/components/cura-modal.js.map +1 -1
- package/dist/components/cura-page-template.js +1 -1
- package/dist/components/cura-paragraph2.js +1 -1
- package/dist/components/cura-progress-bar2.js +1 -1
- package/dist/components/cura-radio.js +21 -17
- package/dist/components/cura-radio.js.map +1 -1
- package/dist/components/cura-select-option2.js +1 -1
- package/dist/components/cura-select2.js +3 -3
- package/dist/components/cura-stepper-item2.js +1 -1
- package/dist/components/cura-stepper.js +1 -1
- package/dist/components/cura-switch.js +6 -2
- package/dist/components/cura-switch.js.map +1 -1
- package/dist/components/cura-toast.js +1 -1
- package/dist/components/cura-tooltip.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/{p-25932952.entry.js → p-0b872499.entry.js} +2 -2
- package/dist/cura/p-0c25333f.js.map +1 -1
- package/dist/cura/p-0ccde0ff.entry.js +2 -0
- package/dist/cura/p-0ccde0ff.entry.js.map +1 -0
- package/dist/cura/{p-777decf9.entry.js → p-137f003b.entry.js} +2 -2
- package/dist/cura/{p-3c305dbd.entry.js → p-202dc01a.entry.js} +2 -2
- package/dist/cura/{p-57c854b3.entry.js → p-20b05d8f.entry.js} +2 -2
- package/dist/cura/{p-1c9c62f1.entry.js → p-5a43e745.entry.js} +2 -2
- package/dist/cura/p-7a68835f.entry.js +2 -0
- package/dist/cura/p-7a68835f.entry.js.map +1 -0
- package/dist/cura/p-9fce5ec5.entry.js +2 -0
- package/dist/cura/p-9fce5ec5.entry.js.map +1 -0
- package/dist/cura/{p-b5464dfc.entry.js → p-ac01bec2.entry.js} +2 -2
- package/dist/cura/{p-0342c255.entry.js → p-b5d8a26b.entry.js} +2 -2
- package/dist/cura/p-b5d8a26b.entry.js.map +1 -0
- package/dist/cura/p-d8e1e182.entry.js +2 -0
- package/dist/cura/p-d8e1e182.entry.js.map +1 -0
- package/dist/cura/{p-d7f46266.entry.js → p-d97719bc.entry.js} +2 -2
- package/dist/esm/app-globals-ca1945d1.js.map +1 -1
- package/dist/esm/cura-accordion_18.entry.js +10 -10
- package/dist/esm/cura-accordion_18.entry.js.map +1 -1
- package/dist/esm/cura-checkbox.entry.js +4 -2
- package/dist/esm/cura-checkbox.entry.js.map +1 -1
- package/dist/esm/cura-display.entry.js +1 -1
- package/dist/esm/cura-input-date.entry.js +1 -1
- package/dist/esm/cura-loader-bar.entry.js +1 -1
- package/dist/esm/cura-modal.entry.js +15 -2
- package/dist/esm/cura-modal.entry.js.map +1 -1
- package/dist/esm/cura-progress-bar_2.entry.js +2 -2
- package/dist/esm/cura-radio.entry.js +19 -17
- package/dist/esm/cura-radio.entry.js.map +1 -1
- package/dist/esm/cura-stepper.entry.js +1 -1
- package/dist/esm/cura-switch.entry.js +4 -2
- package/dist/esm/cura-switch.entry.js.map +1 -1
- package/dist/esm/cura-toast.entry.js +1 -1
- package/dist/esm/cura-tooltip.entry.js +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cura-avatar/cura-avatar.d.ts +37 -0
- package/dist/types/components/cura-modal/cura-modal.d.ts +3 -0
- package/dist/types/components/forms/cura-checkbox/cura-checkbox.d.ts +18 -0
- package/dist/types/components/forms/cura-checkbox/cura-checkbox.stories.d.ts +15 -0
- package/dist/types/components/forms/cura-radio/cura-radio.d.ts +30 -12
- package/dist/types/components/forms/cura-radio/cura-radio.stories.d.ts +15 -0
- package/dist/types/components/forms/cura-switch/cura-switch.d.ts +18 -0
- package/dist/types/components/forms/cura-switch/cura-switch.stories.d.ts +15 -0
- package/dist/types/components.d.ts +130 -4
- package/package.json +2 -2
- package/dist/cura/p-0342c255.entry.js.map +0 -1
- package/dist/cura/p-0d78f2ed.entry.js +0 -2
- package/dist/cura/p-0d78f2ed.entry.js.map +0 -1
- package/dist/cura/p-3c3d330f.entry.js +0 -2
- package/dist/cura/p-3c3d330f.entry.js.map +0 -1
- package/dist/cura/p-9db912ea.entry.js +0 -2
- package/dist/cura/p-9db912ea.entry.js.map +0 -1
- package/dist/cura/p-d6897ac1.entry.js +0 -2
- package/dist/cura/p-d6897ac1.entry.js.map +0 -1
- /package/dist/cura/{p-25932952.entry.js.map → p-0b872499.entry.js.map} +0 -0
- /package/dist/cura/{p-777decf9.entry.js.map → p-137f003b.entry.js.map} +0 -0
- /package/dist/cura/{p-3c305dbd.entry.js.map → p-202dc01a.entry.js.map} +0 -0
- /package/dist/cura/{p-57c854b3.entry.js.map → p-20b05d8f.entry.js.map} +0 -0
- /package/dist/cura/{p-1c9c62f1.entry.js.map → p-5a43e745.entry.js.map} +0 -0
- /package/dist/cura/{p-b5464dfc.entry.js.map → p-ac01bec2.entry.js.map} +0 -0
- /package/dist/cura/{p-d7f46266.entry.js.map → p-d97719bc.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-radio',\n styleUrl: 'cura-radio.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraRadio {\n /**\n * Reflects the checked state of the radio button.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Status of the radio button.\n * Can be 'error', 'success', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n /**\n * Reflects the disabled state of the radio button.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Reflects the required state of the radio button.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * Text label associated with the radio button.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Specifies the tabindex of the radio button.\n */\n @Prop({ reflect: true }) ontabindex: number;\n /**\n * Position of the label relative to the radio button.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n /**\n * Value associated with the radio button.\n */\n @Prop({ reflect: true }) value: string = '';\n /**\n * Name attribute of the radio button.\n */\n @Prop({ reflect: true }) name: string = '';\n /**\n * Background theme of the radio button.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Size of the radio button.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Color theme of the radio button.\n */\n @Prop() color = 'accent';\n\n @State() styles = {}\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n \"large\": { size: 20 },\n \"medium\": { size: 14 },\n \"small\": { size: 10 },\n };\n\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-after': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`\n };\n }\n\n\n @Watch('color')\n @Watch('background')\n setColors() {\n\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--error-base', background: 'error-base' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n\n }\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string; }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string, checked: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n connectedCallback() {\n this.sizeHandler()\n this.setColors();\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n @Watch('background')\n assignColor(type: 'label' | 'message',) {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n const statusColors = {\n success: {\n label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n },\n error: {\n label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n },\n default: {\n label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n }\n };\n\n return statusColors[this.status][type];\n }\n\n render() {\n return (\n <Host role=\"radio\"\n aria-checked={this.checked}\n aria-disabled={this.disabled}\n aria-required={this.required}\n aria-invalid={this.status === 'error'}>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n class=\"label\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}>\n {this.label}\n </cura-label>\n {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n </div>\n <cura-label\n color={this.assignColor('message')}\n size=\"xsmall\"\n class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <input\n type=\"radio\"\n class={`radio ${this.size.toLocaleLowerCase()}`}\n name={this.name}\n value={this.value}\n required={this.required}\n tabIndex={this.ontabindex}\n disabled={this.disabled}\n checked={this.checked}\n onClick={this.handleClick}\n />\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-radio',\n styleUrl: 'cura-radio.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraRadio {\n /**\n * Reflects the checked state of the radio button.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Status of the radio button.\n * Can be 'error', 'success', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n /**\n * Reflects the disabled state of the radio button.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Reflects the required state of the radio button.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * Text label associated with the radio button.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Specifies the tabindex of the radio button.\n */\n @Prop({ reflect: true }) ontabindex: number;\n /**\n * Position of the label relative to the radio button.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Value associated with the radio button.\n */\n @Prop({ reflect: true }) value: string = '';\n /**\n * Name attribute of the radio button.\n */\n @Prop({ reflect: true }) name: string = '';\n /**\n * Background theme of the radio button.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Size of the radio button.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Color theme of the radio button.\n */\n @Prop() color = 'accent';\n\n /**\n * Controls how the label text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n *\n * @default 'none'\n */\n @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n /**\n * Controls how the helper text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n *\n * @default 'none'\n */\n @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 20 },\n medium: { size: 14 },\n small: { size: 10 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-after': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--error-base', background: 'error-base' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n }\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string; checked: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n @Watch('background')\n assignColor(type: 'label' | 'message') {\n if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n const statusColors = {\n success: {\n label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkbackground() ? 'success-base' : 'success-dark',\n },\n error: {\n label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkbackground() ? 'error-base' : 'error-dark',\n },\n default: {\n label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n render() {\n return (\n <Host role=\"radio\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n textOverflow={this.overflowLabel}\n class={`label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`}\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}\n >\n {this.label}\n </cura-label>\n {this.required && (\n <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n *{' '}\n </cura-paragraph>\n )}\n </div>\n <cura-label textOverflow={this.overflowHelper} color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <input\n type=\"radio\"\n class={`radio ${this.size.toLocaleLowerCase()}`}\n name={this.name}\n value={this.value}\n required={this.required}\n tabIndex={this.ontabindex}\n disabled={this.disabled}\n checked={this.checked}\n />\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -28,10 +28,12 @@ export default {
|
|
|
28
28
|
value="${args.value}"` : ''}${args.name ? `
|
|
29
29
|
name="${args.name}"` : ''}${args.label ? `
|
|
30
30
|
label="${args.label}"` : ''}${args.status && args.status !== 'default' ? `
|
|
31
|
-
status="${args.status}"` : ''}
|
|
32
|
-
${
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
status="${args.status}"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `
|
|
32
|
+
text-overflow="${args.textOverflow}"` : ''}
|
|
33
|
+
>
|
|
34
|
+
${message ? ` ${message}` : ''}
|
|
35
|
+
|
|
36
|
+
</cura-radio>
|
|
35
37
|
`;
|
|
36
38
|
return block;
|
|
37
39
|
},
|
|
@@ -154,6 +156,16 @@ export default {
|
|
|
154
156
|
defaultValue: { summary: '' },
|
|
155
157
|
},
|
|
156
158
|
},
|
|
159
|
+
textOverflow: {
|
|
160
|
+
control: { type: 'select' },
|
|
161
|
+
options: ['none', 'single'],
|
|
162
|
+
description: 'Aplica definições de corte de texto com `ellipsis`.',
|
|
163
|
+
name: 'text-overflow',
|
|
164
|
+
table: {
|
|
165
|
+
category: 'Properties',
|
|
166
|
+
defaultValue: { summary: 'none' }
|
|
167
|
+
}
|
|
168
|
+
},
|
|
157
169
|
},
|
|
158
170
|
};
|
|
159
171
|
export const CuraRadioStory = {
|
|
@@ -171,6 +183,7 @@ export const CuraRadioStory = {
|
|
|
171
183
|
value: '',
|
|
172
184
|
name: 'radio-group',
|
|
173
185
|
ontabindex: 0,
|
|
186
|
+
textOverflow: 'none',
|
|
174
187
|
},
|
|
175
188
|
};
|
|
176
189
|
//# sourceMappingURL=cura-radio.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-radio.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAoB,EAAE,EAAE;YAAxB,EAAE,OAAO,OAAW,EAAN,IAAI,cAAlB,WAAoB,CAAF;QACzB,MAAM,KAAK,GAAG,cAAc,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;UACrC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACvB,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACxB,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;UAC/C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;cAC5D,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC9C,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC;gBAC3E,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;WACvE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WAClC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;UAClC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WAChC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;
|
|
1
|
+
{"version":3,"file":"cura-radio.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { baseColors } from '../../../utils/utils';\n\nexport default {\n title: 'Componentes/Forms/Radio',\n tags: ['autodocs'],\n render: ({ message, ...args }) => {\n const block = `<cura-radio${args.checked ? `\n checked` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.name ? `\n name=\"${args.name}\"` : ''}${args.label ? `\n label=\"${args.label}\"` : ''}${args.status && args.status !== 'default' ? `\n status=\"${args.status}\"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `\n text-overflow=\"${args.textOverflow}\"` : ''} \n >\n ${message ? ` ${message}` : ''} \n \n </cura-radio>\n`;\n return block;\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto da label do radio.',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n description: 'Conteúdo de ajuda ou mensagem.',\n name: 'content',\n table: {\n category: 'Slot',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define se o radio está checado.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n disabled: {\n control: 'boolean',\n description: 'Desabilita o radio.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n required: {\n control: 'boolean',\n description: 'Torna o radio obrigatório.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n ontabindex: {\n control: 'number',\n description: 'Define o tabIndex do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 0 }\n },\n name: 'ontabindex'\n },\n position: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do box em relação ao label.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'position'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' }\n }\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Tema do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['', ...baseColors],\n description: 'Cor do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n value: {\n control: 'text',\n description: 'Valor associado ao radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '' }\n }\n },\n name: {\n control: 'text',\n description: 'Nome do grupo de radio buttons.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '' }\n }\n },\n status: {\n control: { type: 'select' },\n options: ['default', 'success', 'error'],\n description: 'Status do checkbox.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n onchange: {\n control: 'none',\n description: 'Este evento via Listener quando o estado do radio é alterado.`{ checked: boolean, value: string }`',\n table: {\n category: 'Event',\n defaultValue: { summary: '' },\n },\n },\n textOverflow: {\n control: { type: 'select' },\n options: ['none', 'single'],\n description: 'Aplica definições de corte de texto com `ellipsis`.',\n name: 'text-overflow',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'none'}\n }\n },\n },\n};\n\nexport const CuraRadioStory = {\n args: {\n label: 'Radio',\n message: 'Info text',\n checked: false,\n required: false,\n disabled: false,\n size: 'medium',\n position: 'left',\n background: 'light',\n status: 'default',\n color: 'accent',\n value: '',\n name: 'radio-group',\n ontabindex: 0,\n textOverflow: 'none',\n },\n};\n"]}
|
|
@@ -304,13 +304,13 @@ export class CuraSelect {
|
|
|
304
304
|
document.removeEventListener('click', this.handleClickOutside);
|
|
305
305
|
}
|
|
306
306
|
render() {
|
|
307
|
-
return (h(Host, { key: '
|
|
307
|
+
return (h(Host, { key: '1757de6c21410c258aa495d9ed484fbf6d4e07fa', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: 'beaa6e3ae5a41efe8055b271ab0505b83bb25e03', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '249e2a4343abacdd445f6fd350008312fe5577fe', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '910c7089a86b7f4a539e10a37aa771027aa035bd', class: "required" }, "* "))), h("div", { key: 'd352865d850a8bbbe186189538f370d38bce5062', class: {
|
|
308
308
|
'cura-input-field': true,
|
|
309
309
|
'open': this.isOpen,
|
|
310
|
-
} }, this.renderIcon(), h("input", { key: '
|
|
310
|
+
} }, this.renderIcon(), h("input", { key: 'bf14408d2d134530198ec108a2c885fc7c0283f5', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '7ffaf78d35c784e4dddbe67a3a52bacd5a7c8525', class: "up-down-button" }, h("cura-icon", { key: '436612e326a50aa6b6d5fe27246b1e10b5b4c14c', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '34f20c65e37fe40cc708bab29054cdb436fb233a', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'fd4ab76af19470d7c82b2bd7931a6b329f5db8ba' })), this.isOpen && (h("div", { key: '2a831c778efbbb4ad989bfb1ccc207741890285d', class: {
|
|
311
311
|
menu: true,
|
|
312
312
|
open: this.isOpen,
|
|
313
|
-
} }, h("slot", { key: '
|
|
313
|
+
} }, h("slot", { key: '4acd7b45bf96420a9cb9db294c67b8173245b452', name: "option" }))))));
|
|
314
314
|
}
|
|
315
315
|
static get is() { return "cura-select"; }
|
|
316
316
|
static get encapsulation() { return "shadow"; }
|
|
@@ -33,7 +33,7 @@ export class CuraSelectOption {
|
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '0822f9ef2bf99e9f2fd9b82757c232449cec3397', slot: "option", role: "option", "aria-selected": this.selected }, h("div", { key: '97ce07635ab1e67676cdf80bce6b1eada30e035c', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'd6fb19b666f1d12d713ba1e6270ebb62a12d86ab', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '78f64d9347185fd398e1adbc45650cf247894481' })), this.selected && h("cura-icon", { key: '948e0d36d71e4c236a2472032703dbb47a371910', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "cura-select-option"; }
|
|
39
39
|
static get encapsulation() { return "shadow"; }
|
|
@@ -42,24 +42,34 @@
|
|
|
42
42
|
* Required CSS Properties: --primary-base opacity: 0.16
|
|
43
43
|
* Use: @include shadow-level3-primary(){ ... }
|
|
44
44
|
*/
|
|
45
|
+
/**
|
|
46
|
+
* Truncate text in single line
|
|
47
|
+
* Use: @include truncate-single() { ... }
|
|
48
|
+
*/
|
|
45
49
|
:host {
|
|
46
50
|
display: block;
|
|
47
|
-
width: fit-content;
|
|
48
51
|
box-sizing: border-box;
|
|
52
|
+
min-width: 0;
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
.container {
|
|
52
56
|
display: flex;
|
|
53
57
|
align-items: center;
|
|
54
58
|
flex-direction: row-reverse;
|
|
59
|
+
justify-content: start;
|
|
55
60
|
gap: var(--gap);
|
|
56
61
|
text-align: left;
|
|
62
|
+
cursor: pointer;
|
|
57
63
|
}
|
|
58
64
|
|
|
59
65
|
.position {
|
|
60
66
|
flex-direction: row;
|
|
61
67
|
}
|
|
62
68
|
|
|
69
|
+
.info {
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
}
|
|
72
|
+
|
|
63
73
|
.label,
|
|
64
74
|
.message {
|
|
65
75
|
text-align: left;
|
|
@@ -23,6 +23,8 @@ export class CuraSwitch {
|
|
|
23
23
|
this.size = 'medium';
|
|
24
24
|
this.background = 'light';
|
|
25
25
|
this.color = 'accent';
|
|
26
|
+
this.overflowLabel = 'none';
|
|
27
|
+
this.overflowHelper = 'none';
|
|
26
28
|
this.styles = {};
|
|
27
29
|
}
|
|
28
30
|
sizeHandler() {
|
|
@@ -92,7 +94,7 @@ export class CuraSwitch {
|
|
|
92
94
|
return classes;
|
|
93
95
|
}
|
|
94
96
|
render() {
|
|
95
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: '39e910a3c68672eb23a123529a77f8ee0d1093aa', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: '649b89d2709b8afa30cfc1ba549d45ac3c9c04a1', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, h("div", { key: '4b1c7d704f0db997a4738abbd248c3a0bbcfdfcd', class: "info" }, h("cura-label", { key: 'b225b06ed00144348d08bb95c8a5bf2f1f48e610', textOverflow: this.overflowLabel, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '22f5e79e0b2e98867663a9a60436d11bc2ce236e', textOverflow: this.overflowHelper, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: 'd9ed12c05133baeec10aa149f26d6dc01b2e3cd8' }))), h("div", { key: 'd51364956de2b53735285109dd457cbff9500eb7', class: "control" }, h("div", { key: '5f1ce68eba5430eac69d670a72c4abd48a79a90d', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '5077af32559bc7eb183745544844d01a6078ee1d', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
|
|
96
98
|
}
|
|
97
99
|
static get is() { return "cura-switch"; }
|
|
98
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -252,6 +254,48 @@ export class CuraSwitch {
|
|
|
252
254
|
"attribute": "color",
|
|
253
255
|
"reflect": false,
|
|
254
256
|
"defaultValue": "'accent'"
|
|
257
|
+
},
|
|
258
|
+
"overflowLabel": {
|
|
259
|
+
"type": "string",
|
|
260
|
+
"mutable": false,
|
|
261
|
+
"complexType": {
|
|
262
|
+
"original": "'none' | 'single' | string",
|
|
263
|
+
"resolved": "string",
|
|
264
|
+
"references": {}
|
|
265
|
+
},
|
|
266
|
+
"required": false,
|
|
267
|
+
"optional": false,
|
|
268
|
+
"docs": {
|
|
269
|
+
"tags": [{
|
|
270
|
+
"name": "default",
|
|
271
|
+
"text": "'none'"
|
|
272
|
+
}],
|
|
273
|
+
"text": "Controls how the label text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
|
|
274
|
+
},
|
|
275
|
+
"attribute": "overflow-label",
|
|
276
|
+
"reflect": true,
|
|
277
|
+
"defaultValue": "'none'"
|
|
278
|
+
},
|
|
279
|
+
"overflowHelper": {
|
|
280
|
+
"type": "string",
|
|
281
|
+
"mutable": false,
|
|
282
|
+
"complexType": {
|
|
283
|
+
"original": "'none' | 'single' | string",
|
|
284
|
+
"resolved": "string",
|
|
285
|
+
"references": {}
|
|
286
|
+
},
|
|
287
|
+
"required": false,
|
|
288
|
+
"optional": false,
|
|
289
|
+
"docs": {
|
|
290
|
+
"tags": [{
|
|
291
|
+
"name": "default",
|
|
292
|
+
"text": "'none'"
|
|
293
|
+
}],
|
|
294
|
+
"text": "Controls how the helper text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
|
|
295
|
+
},
|
|
296
|
+
"attribute": "overflow-helper",
|
|
297
|
+
"reflect": true,
|
|
298
|
+
"defaultValue": "'none'"
|
|
255
299
|
}
|
|
256
300
|
};
|
|
257
301
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 64 },\n medium: { size: 48 },\n small: { size: 40 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--neutral-pale', background: 'neutral-pale' },\n { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n { name: '--color-base-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string }) {\n this.checked = state.value === 'true';\n this.internals.setFormValue(this.checked.toString());\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.checked.toString());\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.checked.toString());\n this.onchange.emit({ checked: this.checked });\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n return this.isDarkbackground() ? colorDark : colorLight;\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n render() {\n return (\n <Host role=\"switch\"\n aria-checked={this.checked}\n aria-disabled={this.disabled}>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n class=\"label\"\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}\n >\n {this.label}\n </cura-label>\n <cura-label\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\"\n >\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n /**\n * Controls how the label text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n *\n * @default 'none'\n */\n @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n /**\n * Controls how the helper text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n *\n * @default 'none'\n */\n @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 64 },\n medium: { size: 48 },\n small: { size: 40 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--neutral-pale', background: 'neutral-pale' },\n { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n { name: '--color-base-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string }) {\n this.checked = state.value === 'true';\n this.internals.setFormValue(this.checked.toString());\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.checked.toString());\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.checked.toString());\n this.onchange.emit({ checked: this.checked });\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n return this.isDarkbackground() ? colorDark : colorLight;\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n render() {\n return (\n <Host role=\"switch\" aria-checked={this.checked} aria-disabled={this.disabled}>\n <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n <div class=\"info\">\n <cura-label\n textOverflow={this.overflowLabel}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n class=\"label\"\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}\n >\n {this.label}\n </cura-label>\n <cura-label\n textOverflow={this.overflowHelper}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\"\n >\n <slot></slot>\n </cura-label>\n </div>\n\n <div class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -19,8 +19,11 @@ const renderCuraSwitch = (label, message, args) => {
|
|
|
19
19
|
ontabindex="${args.ontabindex}"` : ''}${args.background && args.background !== 'light' ? `
|
|
20
20
|
background="${args.background}"` : ''}${args.color && args.color !== 'accent' ? `
|
|
21
21
|
color="${args.color}"` : ''}${label ? `
|
|
22
|
-
label="${label}"` : ''}
|
|
23
|
-
${
|
|
22
|
+
label="${label}"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `
|
|
23
|
+
text-overflow="${args.textOverflow}"` : ''}
|
|
24
|
+
>
|
|
25
|
+
|
|
26
|
+
${message ? ` ${message}` : ''}
|
|
24
27
|
</cura-switch>
|
|
25
28
|
`;
|
|
26
29
|
return `${block}`;
|
|
@@ -119,6 +122,16 @@ export default {
|
|
|
119
122
|
defaultValue: { summary: '' },
|
|
120
123
|
},
|
|
121
124
|
},
|
|
125
|
+
textOverflow: {
|
|
126
|
+
control: { type: 'select' },
|
|
127
|
+
options: ['none', 'single'],
|
|
128
|
+
description: 'Aplica definições de corte de texto com `ellipsis`.',
|
|
129
|
+
name: 'text-overflow',
|
|
130
|
+
table: {
|
|
131
|
+
category: 'Properties',
|
|
132
|
+
defaultValue: { summary: 'none' }
|
|
133
|
+
}
|
|
134
|
+
},
|
|
122
135
|
},
|
|
123
136
|
};
|
|
124
137
|
export const CuraSwitchStory = {
|
|
@@ -132,6 +145,7 @@ export const CuraSwitchStory = {
|
|
|
132
145
|
position: 'left',
|
|
133
146
|
background: 'light',
|
|
134
147
|
ontabindex: 0,
|
|
148
|
+
textOverflow: 'none',
|
|
135
149
|
},
|
|
136
150
|
};
|
|
137
151
|
//# sourceMappingURL=cura-switch.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChD,MAAM,KAAK,GAAG,eAAe,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;UACpC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;UAC9C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACnC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;cACjD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC9C,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC;gBAC3E,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;WACvE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;WAC7B,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"cura-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSwitch = (label, message, args) => {\n const block = `<cura-switch${args.checked ? `\n checked` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${label ? `\n label=\"${label}\"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `\n text-overflow=\"${args.textOverflow}\"` : ''} \n >\n \n ${message ? ` ${message}` : ''}\n</cura-switch>\n`;\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Forms/Switch',\n tags: ['autodocs'],\n render: ({ label, message, ...args }) => {\n return renderCuraSwitch(label, message, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do label do switch.',\n name: 'label',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n description: 'Texto adicional de ajuda ou mensagem.',\n name: 'Content',\n table: {\n category: 'Slots',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define se o switch está checado.',\n table: {\n category: 'States',\n defaultValue: { summary: false },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Desabilita o switch.',\n table: {\n category: 'States',\n defaultValue: { summary: false },\n },\n },\n ontabindex: {\n control: 'number',\n description: 'Define o tabIndex do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 0 },\n },\n name: 'ontabindex',\n },\n position: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do label em relação ao switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' },\n },\n name: 'position',\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' },\n },\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Background do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' },\n },\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent'],\n description: 'Cor do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' },\n },\n },\n onchange: {\n control: 'none',\n description: 'Emite evento via Listener quando o estado do Switch é alterado. `{ checked: boolean }`',\n table: {\n category: 'Event',\n defaultValue: { summary: '' },\n },\n },\n textOverflow: {\n control: { type: 'select' },\n options: ['none', 'single'],\n description: 'Aplica definições de corte de texto com `ellipsis`.',\n name: 'text-overflow',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'none'}\n }\n },\n },\n};\n\nexport const CuraSwitchStory = {\n args: {\n label: 'Switch',\n color: 'accent',\n message: 'Mensagem do switch',\n checked: false,\n size: 'medium',\n disabled: false,\n position: 'left',\n background: 'light',\n ontabindex: 0,\n textOverflow: 'none',\n },\n};\n"]}
|
|
@@ -16,7 +16,7 @@ export class CuraLoaderBar {
|
|
|
16
16
|
this.setProgress();
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '397073d5ad18c49fedee1832e89c15108b693e01', role: "progressbar", "aria-valuenow": this.progress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'e3c46bc440ee9c54b308679fa8358df4f10c6a9c', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '1635e7d72dd6b34455a1891f6a1907f603c91cb7', class: "progress-bar-fill" }))));
|
|
20
20
|
}
|
|
21
21
|
setColor() {
|
|
22
22
|
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
|
|
@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '09f72e4ec206571c1bfb4333a76da3113f2b386d', style: this.getStyles(), role: "progressbar" }, h("svg", { key: 'd446c093c9ae6c1ebca50e023f2eba592f37eb07', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8d8bf0fefcb924af391977d672f777face8bf24f' }, h("circle", { key: 'd77eaba65fc61c265b7c495e95dae22d9732732b', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'ab82247a03c327a6eac8f5c0770932e3520aa32c', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '6291d976f90dd54aecaead32f8314e977dad4c3f' }, h("linearGradient", { key: '8f213ed3cb1e55f9aae79f18d43f414b48f45a19', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c723178770cb0d49746a72fff6c9c8dc7fbb07b4' }), h("stop", { key: '07bb208a3ca3f3b7a317b1e2386dc9cf683fd155', offset: "1" }))))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "cura-loader-circle"; }
|
|
25
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -60,7 +60,7 @@ export class CuraDisplay {
|
|
|
60
60
|
return tags[`${this.level}`] || tags['default'];
|
|
61
61
|
}
|
|
62
62
|
render() {
|
|
63
|
-
return (h(Host, { key: '
|
|
63
|
+
return (h(Host, { key: 'd06d5fe13d7e9b52f2c4ba2da4367f5f96b3bd45', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "cura-display"; }
|
|
66
66
|
static get encapsulation() { return "shadow"; }
|
|
@@ -59,7 +59,7 @@ export class CuraHeading {
|
|
|
59
59
|
return tags[`${this.level}`] || tags['default'];
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
62
|
+
return (h(Host, { key: '2dfeadb768cc139b6899a588bfd7dc69777bca22', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
|
|
63
63
|
}
|
|
64
64
|
static get is() { return "cura-heading"; }
|
|
65
65
|
static get encapsulation() { return "shadow"; }
|
|
@@ -43,7 +43,7 @@ export class CuraParagraph {
|
|
|
43
43
|
return classes;
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: '7d8ec17290b3b8eaa731994ff75ac7dedf28fbb9', style: this.hostCSSProperties() }, h("p", { key: '72333398b57ca936d2d971db8ee6d7ba442cebec', style: this.styles, class: this.getClasses() }, h("slot", { key: 'ec65120173b5a1791d4018ca8a8583deb74efdc5' }))));
|
|
47
47
|
}
|
|
48
48
|
static get is() { return "cura-paragraph"; }
|
|
49
49
|
static get encapsulation() { return "shadow"; }
|
|
@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
|
|
|
52
52
|
this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
|
-
return (h(Host, { key: '
|
|
55
|
+
return (h(Host, { key: '51683368cca9bff9bdf3a8e835990c89df3cd4be', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '84196bf4ed6914904f14f8ec0d07b40ceace5ebf', class: this.getClasses(), style: this.styles }, h("img", { key: '8968215d670f9cd5a042dd66e6dc15a75d07c68e', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
|
|
56
56
|
}
|
|
57
57
|
get host() { return this; }
|
|
58
58
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-avatar.js","mappings":";;AAAO,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;
|
|
1
|
+
{"file":"cura-avatar.js","mappings":";;AAAO,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAOqB,IAAI;+BAMK,mBAAmB;;4BAUtB,KAAK;sBAKV,KAAK;oBAKQ,SAAS;;;;sBAiB/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;KACH;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,IAAI,GAAG,GAAG;SACzD,CAAC;KACH;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;KAChG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK,IAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAvatar"],"sources":["src/components/cura-avatar/cura-avatar.definitions.tsx","src/components/cura-avatar/cura-avatar.scss?tag=cura-avatar&encapsulation=shadow","src/components/cura-avatar/cura-avatar.tsx"],"sourcesContent":["export const avatarSizes = {\n '80': { border: 2.5 },\n '40': { border: 2.25 },\n '32': { border: 2 },\n '24': { border: 1.75 },\n};\n",":host {\n display: inline-flex;\n\n .conteiner {\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size);\n height: var(--size);\n border: var(--border) solid var(--border-color);\n border-radius: var(--border-radius);\n background: var(--background-color);\n overflow: hidden;\n &.floating {\n box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n }\n }\n .conteiner img {\n outline: none;\n object-fit: contain;\n width: 100%;\n height: 100%;\n }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n tag: 'cura-avatar',\n styleUrl: 'cura-avatar.scss',\n shadow: true,\n})\nexport class CuraAvatar {\n @Element() host: HTMLElement;\n\n /**\n * Size of the avatar. Values: 80, 40, 32, 24.\n * @default 80\n */\n @Prop() size: '80' | '40' | '32' | '24' = '80';\n /**\n * Background color of the avatar.\n * Accepts any color from the theme.\n * @default neutral-purewhite\n */\n @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n /**\n * Border color of the avatar.\n * Accepts any color from the theme.\n */\n @Prop({ reflect: true }) borderColor: string;\n /**\n * Border radius of the avatar.\n * @default 50%\n */\n @Prop({ reflect: true }) borderRadius: string = '50%';\n /**\n * Show border of the avatar.\n * @default false\n */\n @Prop({ reflect: true }) border: boolean = false;\n /**\n * Type of the avatar.\n * @default default\n */\n @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n /**\n * Image source of the avatar.\n * Accepts any image source. If not provided, the default image will be used.\n */\n @Prop({ reflect: true, mutable: true }) imageSrc: string;\n /**\n * Default image source of the avatar.\n * Some predefined images are available in the design system assets folder.\n */\n @Prop({ reflect: true }) imageSrcDefault: string;\n /**\n * Floating state of the avatar.\n * @default false\n */\n @Prop({ reflect: true }) floating: boolean;\n\n @State() styles = {};\n\n @Watch('size')\n sizeHandler(size: string) {\n this.styles = {\n ...this.styles,\n '--size': `${size}px`,\n };\n }\n\n assetsPath: string;\n\n getClasses() {\n const classes = {};\n classes['conteiner'] = true;\n classes['floating'] = this.floating;\n return classes;\n }\n\n connectedCallback() {\n this.assetsPath = window.CuraAPI.localAssetsPath;\n this.sizeHandler(this.size);\n }\n\n hostCSSProperties() {\n const avatarSize = avatarSizes[this.size];\n\n return {\n '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n '--border-radius': `${this.borderRadius}`,\n '--border': this.border ? `${avatarSize.border}px` : '0',\n };\n }\n\n onSrcError() {\n this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()} role=\"img\">\n <div class={this.getClasses()} style={this.styles}>\n <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|