npm - @scania/tegel - Versions diffs - 0.0.2 → 0.0.5 - Mend

@scania/tegel 0.0.2 → 0.0.5

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.

Files changed (962) hide show

package/dist/esm/sdds-textfield.entry.js CHANGED Viewed

@@ -1,87 +1,78 @@
-import { r as registerInstance, c as createEvent, h } from './index-32571711.js';
+import { r as registerInstance, c as createEvent, h } from './index-fdfb114c.js';
-const textfieldCss = ":root,.sdds-mode-light{--sdds-textfield-background-primary:var(--sdds-grey-50);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-color:var(--sdds-grey-868);--sdds-textfield-placeholder:var(--sdds-grey-500);--sdds-textfield-background-disabled-primary:var(--sdds-grey-50);--sdds-textfield-background-disabled-secondary:var(--sdds-white);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-color-disabled:var(--sdds-grey-400);--sdds-textfield-placeholder-disabled:var(--sdds-grey-400);--sdds-textfield-label-disabled:var(--sdds-grey-400);--sdds-textfield-ps-color-disabled:var(--sdds-grey-400);--sdds-textfield-label-color:var(--sdds-grey-958);--sdds-textfield-label-inside-color:var(--sdds-grey-700);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-500);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-700);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-700);--sdds-textfield-textcounter-divider:var(--sdds-grey-500);--sdds-textfield-ps-color:var(--sdds-grey-600);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-800);--sdds-textfield-border-bottom-success:var(--sdds-grey-958);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-958);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-958)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-mode-dark{--sdds-textfield-background-primary:var(--sdds-grey-900);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-secondary:var(--sdds-grey-868);--sdds-textfield-color:var(--sdds-grey-200);--sdds-textfield-placeholder:var(--sdds-grey-600);--sdds-textfield-ps-color-disabled:var(--sdds-grey-700);--sdds-textfield-color-disabled:var(--sdds-grey-800);--sdds-textfield-background-disabled-primary:var(--sdds-grey-900);--sdds-textfield-background-disabled-secondary:var(--sdds-grey-868);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-placeholder-disabled:var(--sdds-grey-800);--sdds-textfield-label-disabled:var(--sdds-grey-700);--sdds-textfield-label-color:var(--sdds-grey-100);--sdds-textfield-label-inside-color:var(--sdds-grey-400);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-700);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-600);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-600);--sdds-textfield-textcounter-divider:var(--sdds-grey-700);--sdds-textfield-ps-color:var(--sdds-grey-100);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-400);--sdds-textfield-border-bottom-success:var(--sdds-grey-50);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-100);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-50)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-textfield-input{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-textfield-input::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-md{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-md::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-md:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-md:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-md:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-md:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-sm{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-sm::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-sm:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-sm:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-sm:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-sm:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.sdds-textfield-container:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.sdds-form-textfield-md .sdds-textfield-container{height:48px}.sdds-form-textfield-sm .sdds-textfield-container{height:40px}.sdds-textfield-input-container{position:relative;width:100%}.sdds-textfield-label-outside>*{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.sdds-textfield-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.sdds-form-textfield{display:block;min-width:208px}.sdds-form-textfield-nomin{min-width:auto}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input~.sdds-textfield-label-inside{top:20px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-textfield-bar{position:absolute;width:100%}.sdds-textfield-bar::before,.sdds-textfield-bar::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.sdds-form-textfield-md .sdds-textfield-bar::before,.sdds-form-textfield-md .sdds-textfield-bar::after{top:46px}.sdds-form-textfield-sm .sdds-textfield-bar::before,.sdds-form-textfield-sm .sdds-textfield-bar::after{top:40px}.sdds-textfield-bar::before{left:50%}.sdds-textfield-bar::after{right:50%}.sdds-textfield-focus .sdds-textfield-bar::before,.sdds-textfield-focus .sdds-textfield-bar::after{width:50%}.sdds-textfield-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.sdds-textfield-helper .sdds-textfield-textcounter{margin-left:auto}.sdds-form-textfield-disabled .sdds-textfield-container{border-bottom-color:transparent}.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix>*,.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix>*{color:var(--sdds-textfield-ps-color-disabled)}.sdds-form-textfield-disabled .sdds-textfield-label-outside>*{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-icon__readonly{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.sdds-textfield-icon__readonly-label{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.sdds-form-textfield-readonly{pointer-events:none}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly{display:block}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover~.sdds-textfield-icon__readonly-label{display:block}.sdds-form-textfield-readonly .sdds-textfield-input{padding-right:54px;background-color:transparent}.sdds-form-textfield-success .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.sdds-form-textfield-error .sdds-textfield-helper{color:var(--sdds-textfield-helper-error)}.sdds-form-textfield-error .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.sdds-form-textfield-error .sdds-textfield-bar::before,.sdds-form-textfield-error .sdds-textfield-bar::after{background:var(--sdds-textfield-bar-error)}.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon){color:var(--sdds-textfield-icon-error)}.sdds-textfield-helper-error-state{display:flex;gap:8px;flex-wrap:nowrap}.sdds-textfield-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.sdds-textfield-textcounter .sdds-textfield-textcounter-divider{color:var(--sdds-textfield-textcounter-divider)}.sdds-textfield-slot-wrap-prefix{align-self:center}.sdds-textfield-slot-wrap-prefix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}.sdds-textfield-slot-wrap-suffix{align-self:center}.sdds-textfield-slot-wrap-suffix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}slot[name=sdds-prefix]::slotted(sdds-icon),slot[name=sdds-suffix]::slotted(sdds-icon){font-size:24px;line-height:0}slot[name=sdds-prefix]::slotted(*){padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix]::slotted(*)~.sdds-textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix]::slotted(*){padding-right:var(--sdds-spacing-element-20)}";
+const textfieldCss = ".textfield-input-lg.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.form-textfield-error slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,.form-textfield-error slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{color:var(--sdds-textfield-icon-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{font-size:24px;line-height:0}slot[name=sdds-prefix].sc-sdds-textfield-s>*{padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix].sc-sdds-textfield-s~.textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix].sc-sdds-textfield-s>*{padding-right:var(--sdds-spacing-element-20)}";
-const Textfield = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sddsChange = createEvent(this, "sddsChange", 6);
-    this.sddsInput = createEvent(this, "sddsInput", 6);
-    this.sddsFocus = createEvent(this, "sddsFocus", 6);
-    this.sddsBlur = createEvent(this, "sddsBlur", 6);
-    this.type = 'text';
-    this.labelPosition = 'no-label';
-    this.label = '';
-    this.helper = undefined;
-    this.placeholder = '';
-    this.value = '';
-    this.disabled = false;
-    this.readOnly = false;
-    this.size = 'lg';
-    this.modeVariant = null;
-    this.noMinWidth = false;
-    this.name = '';
-    this.state = 'default';
-    this.maxLength = undefined;
-    this.autofocus = false;
-    this.focusInput = undefined;
-  }
-  handleChange(event) {
-    this.sddsChange.emit(event);
-  }
-  // Data input event in value prop
-  handleInput(event) {
-    this.sddsInput.emit(event);
-    this.value = event.target.value;
-  }
-  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
-  handleFocus(event) {
-    this.textInput.focus();
-    this.focusInput = true;
-    this.sddsFocus.emit(event);
-  }
-  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
-  handleBlur(event) {
-    this.focusInput = false;
-    this.sddsBlur.emit(event);
-  }
-  render() {
-    var _a;
-    let className = ' sdds-textfield-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
-    }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
-    }
+const Textfield = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sddsChange = createEvent(this, "sddsChange", 6);
+    this.sddsInput = createEvent(this, "sddsInput", 6);
+    this.sddsFocus = createEvent(this, "sddsFocus", 6);
+    this.sddsBlur = createEvent(this, "sddsBlur", 6);
+    this.type = 'text';
+    this.labelPosition = 'no-label';
+    this.label = '';
+    this.helper = undefined;
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.size = 'lg';
+    this.modeVariant = null;
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.sddsChange.emit(event);
+  }
+  // Data input event in value prop
+  handleInput(event) {
+    this.sddsInput.emit(event);
+    this.value = event.target.value;
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event) {
+    this.textInput.focus();
+    this.focusInput = true;
+    this.sddsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event) {
+    this.focusInput = false;
+    this.sddsBlur.emit(event);
+  }
+  render() {
+    var _a;
     return (h("div", { class: `
-        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
-        ${this.focusInput && !this.disabled
-        ? 'sdds-form-textfield sdds-textfield-focus'
-        : ' sdds-form-textfield'}
-        ${this.value ? 'sdds-textfield-data' : ''}
-        ${this.labelPosition === 'inside' && this.size !== 'sm'
-        ? 'sdds-textfield-container-label-inside'
+        ${this.noMinWidth ? 'form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}
+        ${this.value ? 'textfield-data' : ''}
+        ${this.labelPosition === 'inside' && this.size !== 'sm'
+        ? 'textfield-container-label-inside'
         : ''}
-        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
-        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.disabled ? 'form-textfield-disabled' : ''}
+        ${this.readOnly ? 'form-textfield-readonly' : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
-        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-textfield-${this.state}`
-        : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
-        if (!this.readOnly) {
-          this.handleFocus(event);
-        }
-      }, onBlur: (event) => {
-        if (!this.readOnly) {
-          this.handleBlur(event);
-        }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("span", { class: "sdds-textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
-  }
-};
+        ${this.size === 'md' ? 'form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "textfield-container" }, h("div", { class: `textfield-slot-wrap-prefix textfield-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `textfield-input textfield-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "textfield-label-inside" }, this.label))), h("div", { class: "textfield-bar" }), h("div", { class: `textfield-slot-wrap-suffix textfield-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "textfield-helper" }, this.state === 'error' && (h("div", { class: "textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), this.maxLength)))));
+  }
+};
 Textfield.style = textfieldCss;
 export { Textfield as sdds_textfield };
+//# sourceMappingURL=sdds-textfield.entry.js.map

package/dist/esm/sdds-textfield.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-textfield.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,q+aAAq+a;;MCQ7+a,SAAS;;;;;;;gBAKiC,MAAM;yBAGA,UAAU;iBAG7C,EAAE;;uBAMI,EAAE;iBAGS,EAAE;oBAGf,KAAK;oBAGL,KAAK;gBAGE,IAAI;uBAIQ,IAAI;sBAGrB,KAAK;gBAGpB,EAAE;iBAGgC,SAAS;;qBAM7B,KAAK;;;EAclC,YAAY,CAAC,KAAK;IAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC7B;;EAYD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;GACjC;;EAYD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;IACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;;IACJ,QACE,WACE,KAAK,EAAE;UACL,IAAI,CAAC,UAAU,GAAG,sBAAsB,GAAG,EAAE;UAC7C,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,iBAAiB;UACxF,IAAI,CAAC,KAAK,GAAG,gBAAgB,GAAG,EAAE;UAElC,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;UACjD,kCAAkC;UAClC,EACN;UACE,IAAI,CAAC,QAAQ,GAAG,yBAAyB,GAAG,EAAE;UAC9C,IAAI,CAAC,QAAQ,GAAG,yBAAyB,GAAG,EAAE;UAC9C,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;UACxE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,mBAAmB,GAAG,EAAE;UAC7C,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,mBAAmB,GAAG,EAAE;UAC7C,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,kBAAkB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;SACzF,IAEA,IAAI,CAAC,aAAa,KAAK,SAAS,KAC/B,WAAK,KAAK,EAAC,yBAAyB,IAClC,eAAM,IAAI,CAAC,KAAK,CAAO,CACnB,CACP,EACD,WAAK,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,qBAAqB,IACrE,WAAK,KAAK,EAAE,wCAAwC,IAAI,CAAC,KAAK,EAAE,IAC9D,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EAEN,WAAK,KAAK,EAAC,2BAA2B,IACpC,aACE,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,SAAS,GAAG,OAA2B,CAAC,EAChE,KAAK,EAAE,mCAAmC,IAAI,CAAC,IAAI,EAAE,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC7C,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACzB;OACF,EACD,MAAM,EAAE,CAAC,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAClB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;SACxB;OACF,GACD,EAED,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,KACpD,aAAO,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAS,CAC3D,CACG,EACN,WAAK,KAAK,EAAC,eAAe,GAAO,EAEjC,WAAK,KAAK,EAAE,wCAAwC,IAAI,CAAC,KAAK,EAAE,IAC9D,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,YAAM,KAAK,EAAC,0BAA0B,IACpC,iBAAW,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,EACP,YAAM,KAAK,EAAC,gCAAgC,iCAAkC,CAC1E,EAEN,WAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,KAAK,KAAK,OAAO,KACrB,WAAK,KAAK,EAAC,8BAA8B,IACvC,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,EAC/C,IAAI,CAAC,MAAM,CACR,CACP,EACA,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,EAErC,IAAI,CAAC,SAAS,GAAG,CAAC,KACjB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,CAAC,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAC7C,YAAM,KAAK,EAAC,+BAA+B,UAAW,EACrD,IAAI,CAAC,SAAS,CACX,CACP,CACG,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n all: unset;\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-textfield-color);\n background-color: var(--sdds-textfield-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-textfield-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-textfield-placeholder-focus-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--sdds-textfield-background-disabled);\n color: var(--sdds-textfield-color-disabled);\n\n &::placeholder {\n color: var(--sdds-textfield-placeholder-disabled);\n }\n\n ~ .textfield-label-inside {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Sizes\n.textfield-input-lg {\n @include textfield-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.textfield-input-md {\n @include textfield-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n.textfield-input-sm {\n @include textfield-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.textfield-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-textfield-background);\n border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n }\n\n .form-textfield-md & {\n height: 48px;\n }\n\n .form-textfield-sm & {\n height: 40px;\n }\n}\n\n.textfield-input-container {\n position: relative;\n width: 100%;\n}\n\n//Textfield label\n\n/* slot[name=\"sdds-label\"]::slotted(*) {\n @include type-style(\"detail-05\");\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-textfield-label-color);\n} */\n\n//Textfield label\n.textfield-label-outside > * {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-textfield-label-color);\n}\n\n.textfield-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-textfield-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\n &:placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-textfield-placeholder-focus-color);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.form-textfield {\n display: block;\n min-width: 208px;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.form-textfield.textfield-container-label-inside {\n .textfield-input-lg {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .textfield-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .textfield-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .textfield-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.textfield-focus,\n &.textfield-data {\n .textfield-input-sm ~ .textfield-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .textfield-input-md ~ .textfield-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .textfield-input-lg ~ .textfield-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//Textfield bottom bar when in focus\n.textfield-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-textfield-bar);\n transition: 0.35s ease all;\n\n .form-textfield-md & {\n top: 46px;\n }\n\n .form-textfield-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .textfield-focus &::before,\n .textfield-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.textfield-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: flex;\n gap: 8px;\n justify-content: space-between;\n\n & .textfield-textcounter {\n margin-left: auto;\n }\n\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.form-textfield-disabled {\n .textfield-container {\n border-bottom-color: transparent;\n }\n\n .textfield-slot-wrap-prefix,\n .textfield-slot-wrap-suffix {\n > * {\n color: var(--sdds-textfield-ps-color-disabled);\n }\n }\n\n .textfield-label-outside {\n > * {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Read only state\n\n.textfield-icon__readonly {\n display: none;\n position: absolute;\n right: 18px;\n top: 18px;\n color: var(--sdds-textfield-icon-read-only-label-color);\n\n &-label {\n display: none;\n position: absolute;\n right: 18px;\n top: 48px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n padding: 8px;\n white-space: nowrap;\n border-radius: 4px 0 4px 4px;\n background-color: var(--sdds-textfield-icon-read-only-label-background);\n }\n}\n\n.form-textfield-readonly {\n pointer-events: none;\n\n .textfield-icon__readonly {\n display: block;\n\n &:hover {\n ~ .textfield-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n}\n\n//Success state\n.form-textfield-success {\n .textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-success);\n }\n}\n\n//Error State\n.form-textfield-error {\n .textfield-helper {\n color: var(--sdds-textfield-helper-error);\n }\n\n .textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-error);\n }\n\n .textfield-bar {\n &::before,\n &::after {\n background: var(--sdds-textfield-bar-error);\n }\n }\n\n slot[name='sdds-prefix']::slotted(sdds-icon),\n slot[name='sdds-suffix']::slotted(sdds-icon) {\n color: var(--sdds-textfield-icon-error);\n }\n}\n\n// .textfield-textcounter {\n.textfield-helper-error-state {\n display: flex;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n.textfield-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-textfield-textcounter);\n float: right;\n\n & .textfield-textcounter-divider {\n // @include type-style('detail-05');\n color: var(--sdds-textfield-textcounter-divider);\n }\n}\n\n/* slot[name=\"sdds-prefix\"]::slotted(*),\nslot[name=\"sdds-suffix\"]::slotted(*) {\n @include type-style(\"detail-02\");\n align-self: center;\n color: var(--sdds-textfield-ps-color);\n} */\n\n.textfield-slot-wrap-prefix {\n align-self: center;\n\n > * {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n margin-left: 16px;\n color: var(--sdds-textfield-ps-color);\n }\n\n &.textfield-error {\n sdds-icon,\n .icon {\n color: var(--sdds-negative);\n }\n }\n}\n\n.textfield-slot-wrap-suffix {\n align-self: center;\n\n > * {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n margin-right: 16px;\n color: var(--sdds-textfield-ps-color);\n }\n\n &.textfield-error {\n sdds-icon,\n .icon {\n color: var(--sdds-negative);\n }\n }\n}\n\n//TODO: When new icons are avaliable have a look at this one\nslot[name='sdds-prefix']::slotted(sdds-icon),\nslot[name='sdds-suffix']::slotted(sdds-icon) {\n font-size: 24px; //FIXME: When new icons is avaliable it should be 16x16\n line-height: 0;\n}\n\n//Text gerenerated infront of the input field\nslot[name='sdds-prefix']::slotted(*) {\n padding-left: var(--sdds-spacing-element-20);\n\n & ~ .textfield-input {\n padding-left: var(--sdds-spacing-element-12);\n }\n}\n\n//Text generated after the input field\nslot[name='sdds-suffix']::slotted(*) {\n padding-right: var(--sdds-spacing-element-20);\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-textfield',\n styleUrl: 'textfield.scss',\n shadow: false,\n scoped: true,\n})\nexport class Textfield {\n /** Textinput for focus state */\n textInput?: HTMLInputElement;\n\n /** Which input type, text, password or similar */\n @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n /** Position of the label for the textfield. */\n @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n /** Label text */\n @Prop() label: string = '';\n\n /** Helper text */\n @Prop() helper: string;\n\n /** Placeholder text */\n @Prop() placeholder: string = '';\n\n /** Value of the input text */\n @Prop({ reflect: true }) value: string = '';\n\n /** Set input in disabled state */\n @Prop() disabled: boolean = false;\n\n /** Set input in readonly state */\n @Prop() readOnly: boolean = false;\n\n /** Size of the input */\n @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n /** Mode variant of the textfield */\n\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** With setting */\n @Prop() noMinWidth: boolean = false;\n\n /** Name property */\n @Prop() name = '';\n\n /** Error state of input */\n @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n /** Max length of input */\n @Prop() maxLength: number;\n\n /** Autofocus for input */\n @Prop() autofocus: boolean = false;\n\n /** Listen to the focus state of the input */\n @State() focusInput;\n\n /** Change event for the textfield */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsChange: EventEmitter;\n\n handleChange(event): void {\n this.sddsChange.emit(event);\n }\n\n /** Input event for the textfield */\n @Event({\n eventName: 'sddsInput',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsInput: EventEmitter<InputEvent>;\n\n // Data input event in value prop\n handleInput(event): void {\n this.sddsInput.emit(event);\n this.value = event.target.value;\n }\n\n /** Focus event for the textfield */\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleFocus(event): void {\n this.textInput.focus();\n this.focusInput = true;\n this.sddsFocus.emit(event);\n }\n\n /** Blur event for the textfield */\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.focusInput = false;\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div\n class={`\n ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n ${this.value ? 'textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'form-textfield-disabled' : ''}\n ${this.readOnly ? 'form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'form-textfield-md' : ''}\n ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n <slot name=\"prefix\" />\n </div>\n\n <div class=\"textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={`textfield-input textfield-input-${this.size}`}\n type={this.type}\n disabled={this.disabled}\n readonly={this.readOnly}\n placeholder={this.placeholder}\n value={this.value}\n autofocus={this.autofocus}\n maxlength={this.maxLength}\n name={this.name}\n onInput={(event) => this.handleInput(event)}\n onChange={(event) => this.handleChange(event)}\n onFocus={(event) => {\n if (!this.readOnly) {\n this.handleFocus(event);\n }\n }}\n onBlur={(event) => {\n if (!this.readOnly) {\n this.handleBlur(event);\n }\n }}\n />\n\n {this.labelPosition === 'inside' && this.size !== 'sm' && (\n <label class=\"textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"textfield-bar\"></div>\n\n <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n <slot name=\"suffix\" />\n </div>\n <span class=\"textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"textfield-helper\">\n {this.state === 'error' && (\n <div class=\"textfield-helper-error-state\">\n <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n {this.helper}\n </div>\n )}\n {this.state !== 'error' && this.helper}\n\n {this.maxLength > 0 && (\n <div class=\"textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-toast.entry.js CHANGED Viewed

@@ -1,82 +1,84 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-32571711.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fdfb114c.js';
 const sddsToastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:700}:host .toast-wrapper{display:flex;width:348px;background-color:var(--sdds-toast-background-color);border-radius:4px}:host .toast-wrapper.information{border-left:4px solid var(--sdds-information)}:host .toast-wrapper.information sdds-icon{color:var(--sdds-information)}:host .toast-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .toast-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .toast-wrapper.error{border-left:4px solid var(--sdds-negative)}:host .toast-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .toast-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .toast-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .toast-wrapper button.toast-close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .toast-wrapper button.toast-close:hover{cursor:pointer}:host .toast-wrapper button.toast-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .toast-wrapper button.toast-close sdds-icon{color:var(--sdds-toast-dissmiss-color);padding:0}:host sdds-icon{padding:14px 0 0 12px}:host .toast-content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .toast-content .toast-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-toast-headline-color)}:host .toast-content .toast-header.no-subheader{margin-bottom:4px}:host .toast-content .toast-header.only-header{margin-bottom:0}:host .toast-content .toast-subheader slot::slotted(*){margin-top:4px;color:var(--sdds-toast-subheadline-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding-bottom:16px;max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .toast-content .toast-subheader.no-link slot::slotted(*){padding-bottom:0}:host slot[name=toast-link]::slotted(*){color:var(--sdds-toast-link-color)}:host .sdds-mode-variant-primary{--sdds-toast-background:var(--sdds-toast-background-primary)}:host .sdds-mode-variant-secondary{--sdds-toast-background:var(--sdds-toast-background-secondary)}";
-const SddsToast = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sddsClose = createEvent(this, "sddsClose", 7);
-    this.getIconName = () => {
-      switch (this.type) {
-        case 'information':
-          return 'info';
-        case 'error':
-          return 'error';
-        case 'warning':
-          return 'warning';
-        case 'success':
-          return 'tick';
-        default:
-          return 'info';
-      }
-    };
-    this.handleClose = () => {
-      const sddsCloseEvent = this.sddsClose.emit({
-        toastId: this.toastId,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = true;
-      }
-    };
-    this.getHeaderClasses = () => {
-      if (!this.hasSubheader && !this.hasLink) {
-        return 'only-header';
-      }
-      if (!this.hasSubheader) {
-        return 'no-subheader';
-      }
-      return '';
-    };
-    this.toastId = crypto.randomUUID();
-    this.header = undefined;
-    this.subheader = undefined;
-    this.type = 'information';
-    this.hidden = false;
-    this.role = 'alert';
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
-  }
-  /** Hides the toast. */
-  async hideToast() {
-    this.hidden = true;
-    return {
-      toastId: this.toastId,
-    };
-  }
-  /** Shows the toast. */
-  async showToast() {
-    this.hidden = false;
-    return {
-      toastId: this.toastId,
-    };
-  }
-  connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
-  }
-  render() {
-    return (h(Host, { role: this.role, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+const SddsToast = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sddsClose = createEvent(this, "sddsClose", 7);
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.getHeaderClasses = () => {
+      if (!this.hasSubheader && !this.hasLink) {
+        return 'only-header';
+      }
+      if (!this.hasSubheader) {
+        return 'no-subheader';
+      }
+      return '';
+    };
+    this.toastId = crypto.randomUUID();
+    this.header = undefined;
+    this.subheader = undefined;
+    this.type = 'information';
+    this.hidden = false;
+    this.toastRole = 'alert';
+    this.hasSubheader = undefined;
+    this.hasLink = undefined;
+  }
+  /** Hides the toast. */
+  async hideToast() {
+    this.hidden = true;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  /** Shows the toast. */
+  async showToast() {
+    this.hidden = false;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  connectedCallback() {
+    const children = Array.from(this.host.children);
+    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
+    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+  }
+  render() {
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
             toast-wrapper
             ${this.type}
             ` }, h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
               ${this.getHeaderClasses()}
-              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
-        this.handleClose();
-      }, class: `toast-close` }, h("sdds-icon", { name: "cross", size: "20px" })))));
-  }
-  get host() { return getElement(this); }
-};
+              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+        this.handleClose();
+      }, class: `toast-close` }, h("sdds-icon", { name: "cross", size: "20px" })))));
+  }
+  get host() { return getElement(this); }
+};
 SddsToast.style = sddsToastCss;
 export { SddsToast as sdds_toast };
+//# sourceMappingURL=sdds-toast.entry.js.map

package/dist/esm/sdds-toast.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-toast.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,upEAAupE;;MCQ/pE,SAAS;;;;IAsDpB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;IAEF,gBAAW,GAAG;MACZ,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;KACF,CAAC;IAQF,qBAAgB,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;KACX,CAAC;mBA1FwB,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;;EAUvD,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAqCD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;GACpF;EAYD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,IAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV,IAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC7D,WAAK,KAAK,EAAE,eAAe,IACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR,EACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,IAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACN,cACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,KAAK,EAAE,aAAa,IAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n display: none;\n visibility: hidden;\n}\n\n:host {\n z-index: z(toast);\n\n .toast-wrapper {\n display: flex;\n width: calc(352px - 4px);\n background-color: var(--sdds-toast-background-color);\n border-radius: 4px;\n\n &.information {\n border-left: 4px solid var(--sdds-information);\n\n sdds-icon {\n color: var(--sdds-information);\n }\n }\n\n &.success {\n border-left: 4px solid var(--sdds-positive);\n\n sdds-icon {\n color: var(--sdds-positive);\n }\n }\n\n &.error {\n border-left: 4px solid var(--sdds-negative);\n\n sdds-icon {\n color: var(--sdds-negative);\n }\n }\n\n &.warning {\n border-left: 4px solid var(--sdds-warning);\n\n sdds-icon {\n color: var(--sdds-warning);\n }\n }\n\n button.toast-close {\n height: 20px;\n width: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 14px 14px 0 0;\n border: none;\n background: transparent;\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n sdds-icon {\n color: var(--sdds-toast-dissmiss-color);\n padding: 0;\n }\n }\n }\n\n sdds-icon {\n padding: 14px 0 0 12px;\n }\n\n .toast-content {\n padding: 16px 0 16px 10px;\n display: flex;\n flex-direction: column;\n flex: 1;\n\n .toast-header {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-toast-headline-color);\n\n &.no-subheader {\n margin-bottom: 4px;\n }\n\n &.only-header {\n margin-bottom: 0;\n }\n }\n\n .toast-subheader {\n slot::slotted(*) {\n margin-top: 4px;\n color: var(--sdds-toast-subheadline-color);\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding-bottom: 16px;\n max-width: 252px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.no-link {\n slot::slotted(*) {\n padding-bottom: 0;\n }\n }\n }\n }\n\n slot[name='toast-link']::slotted(*) {\n color: var(--sdds-toast-link-color);\n }\n\n .sdds-mode-variant-primary {\n --sdds-toast-background: var(--sdds-toast-background-primary);\n }\n\n .sdds-mode-variant-secondary {\n --sdds-toast-background: var(--sdds-toast-background-secondary);\n }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toast',\n styleUrl: 'sdds-toast.scss',\n shadow: true,\n})\nexport class SddsToast {\n /** ID for the toast. Randomly generated if not specified. */\n @Prop() toastId: string = crypto.randomUUID();\n\n /** Header text for the component. */\n @Prop() header: string;\n\n /** Subheader text for the component. */\n @Prop() subheader: string;\n\n /** Type of toast. */\n @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n /** Hides the toast. */\n @Prop() hidden: boolean = false;\n\n /** ARIA role for the toast. */\n @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n @Element() host: HostElement;\n\n @State() hasSubheader: boolean;\n\n @State() hasLink: boolean;\n\n /** Hides the toast. */\n @Method()\n async hideToast() {\n this.hidden = true;\n return {\n toastId: this.toastId,\n };\n }\n\n /** Shows the toast. */\n @Method()\n async showToast() {\n this.hidden = false;\n return {\n toastId: this.toastId,\n };\n }\n\n /** Sends unique toast identifier component is closed. */\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n toastId: string;\n }>;\n\n getIconName = () => {\n switch (this.type) {\n case 'information':\n return 'info';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'success':\n return 'tick';\n default:\n return 'info';\n }\n };\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n connectedCallback() {\n const children = Array.from(this.host.children);\n this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n }\n\n getHeaderClasses = () => {\n if (!this.hasSubheader && !this.hasLink) {\n return 'only-header';\n }\n if (!this.hasSubheader) {\n return 'no-subheader';\n }\n return '';\n };\n\n render() {\n return (\n <Host\n toastRole={this.toastRole}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n class={`${this.hidden ? 'hide' : 'show'}`}\n >\n <div\n class={`\n toast-wrapper\n ${this.type}\n `}\n >\n <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n <div class={`toast-content`}>\n <div\n class={`toast-header\n ${this.getHeaderClasses()}\n `}\n >\n {this.header}\n </div>\n <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n <slot name=\"toast-subheader\"></slot>\n </div>\n <slot name=\"toast-link\"></slot>\n </div>\n <button\n onClick={() => {\n this.handleClose();\n }}\n class={`toast-close`}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-toggle.entry.js CHANGED Viewed

@@ -1,40 +1,41 @@
-import { r as registerInstance, c as createEvent, h } from './index-32571711.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fdfb114c.js';
 const sddsToggleCss = ".sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.sc-sdds-toggle{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-toggle-headline);margin-bottom:12px}.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.disabled.sc-sdds-toggle{color:var(--sdds-toggle-headline-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle{margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after,.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--sdds-toggle-off-slider);left:0}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after{width:16px;height:16px;background-color:var(--sdds-toggle-switch);border-radius:50%;left:4px;top:4px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus{outline:none}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus::before{background-color:var(--sdds-toggle-off-slider-focus);border:1px solid var(--sdds-toggle-off-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider);border:1px solid var(--sdds-toggle-on-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::after{left:24px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::before{background-color:var(--sdds-toggle-on-slider-disabled);border:1px solid var(--sdds-toggle-on-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::before{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::after{width:8px;height:8px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::after{left:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle label.sc-sdds-toggle{display:inline-block;vertical-align:middle;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);color:var(--sdds-toggle-label-color);padding-left:8px}.sdds-toggle-webcomponent.sc-sdds-toggle label.disabled.sc-sdds-toggle{color:var(--sdds-toggle-label-color-disabled)}";
-const SddsToggle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sddsToggleChangeEvent = createEvent(this, "sddsToggleChangeEvent", 7);
-    this.checked = false;
-    this.required = false;
-    this.ariaLabelledby = undefined;
-    this.ariaDescribedby = undefined;
-    this.size = 'lg';
-    this.name = undefined;
-    this.label = undefined;
-    this.headline = undefined;
-    this.disabled = false;
-    this.toggleId = crypto.randomUUID();
-  }
-  /** Toggles the toggle. */
-  async toggle() {
-    this.checked = !this.checked;
-    return {
-      toggleId: this.toggleId,
-      checked: this.checked,
-    };
-  }
-  render() {
-    return (h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby, onChange: () => {
-        this.checked = !this.checked;
-        this.sddsToggleChangeEvent.emit({
-          toggleId: this.toggleId,
-          checked: this.checked,
-        });
-      }, class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", null))));
-  }
-};
+const SddsToggle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sddsToggle = createEvent(this, "sddsToggle", 6);
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.sddsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
+    this.checked = false;
+    this.required = false;
+    this.size = 'lg';
+    this.name = undefined;
+    this.headline = undefined;
+    this.disabled = false;
+    this.toggleId = crypto.randomUUID();
+  }
+  /** Toggles the toggle. */
+  async toggle() {
+    this.checked = !this.checked;
+    return {
+      toggleId: this.toggleId,
+      checked: this.checked,
+    };
+  }
+  render() {
+    return (h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+  }
+  get host() { return getElement(this); }
+};
 SddsToggle.style = sddsToggleCss;
 export { SddsToggle as sdds_toggle };
+//# sourceMappingURL=sdds-toggle.entry.js.map

package/dist/esm/sdds-toggle.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-toggle.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnH,UAAU;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACD,iCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;","names":[],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n .toggle-headline {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-toggle-headline);\n margin-bottom: 12px;\n\n &.disabled {\n color: var(--sdds-toggle-headline-disabled);\n }\n }\n\n input[type='checkbox'] {\n margin: 0;\n width: 44px;\n height: 24px;\n position: relative;\n display: inline-block;\n vertical-align: middle;\n\n &::after,\n &::before {\n content: '';\n position: absolute;\n box-sizing: border-box;\n transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n }\n\n &::before {\n /* Slider */\n width: 44px;\n height: 24px;\n border-radius: 16px;\n background-color: var(--sdds-toggle-off-slider);\n left: 0;\n }\n\n /* Switch */\n &::after {\n width: 16px;\n height: 16px;\n background-color: var(--sdds-toggle-switch);\n border-radius: 50%;\n left: 4px;\n top: 4px;\n }\n\n &:focus {\n outline: none;\n\n &::before {\n background-color: var(--sdds-toggle-off-slider-focus);\n border: 1px solid var(--sdds-toggle-off-border-focus);\n }\n }\n\n &:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider);\n border: 1px solid var(--sdds-toggle-on-border-focus);\n }\n\n &::after {\n left: calc(44px - 20px);\n }\n }\n\n &:disabled {\n &::before {\n background-color: var(--sdds-toggle-slider-disabled);\n border: 1px solid var(--sdds-toggle-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n\n &:disabled:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider-disabled);\n border: 1px solid var(--sdds-toggle-on-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n\n &.sm {\n width: 28px;\n height: 16px;\n\n &::before {\n width: 28px;\n height: 16px;\n }\n\n &::after {\n width: 8px;\n height: 8px;\n }\n\n &:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider);\n }\n\n &::after {\n left: calc(44px - 28px); // slider width - switch width - padding\n }\n }\n\n &:disabled {\n &::before {\n background-color: var(--sdds-toggle-slider-disabled);\n border: 1px solid var(--sdds-toggle-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n }\n }\n\n label {\n display: inline-block;\n vertical-align: middle;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n color: var(--sdds-toggle-label-color);\n padding-left: 8px;\n\n &.disabled {\n color: var(--sdds-toggle-label-color-disabled);\n }\n }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toggle',\n styleUrl: 'sdds-toggle.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsToggle {\n /** Sets the toggle as checked */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** Make the toggle required */\n @Prop() required: boolean = false;\n\n /** Size of the toggle */\n @Prop() size: 'sm' | 'lg' = 'lg';\n\n /** Name of the toggles input element */\n @Prop() name: string;\n\n /** Headline for the toggle */\n @Prop() headline: string;\n\n /** Sets the toggle in a disabled state */\n @Prop() disabled: boolean = false;\n\n /** ID of the toggles input element, if not specifed it's randomly generated */\n @Prop() toggleId: string = crypto.randomUUID();\n\n @Element() host: HostElement;\n\n /** Toggles the toggle. */\n @Method()\n async toggle() {\n this.checked = !this.checked;\n return {\n toggleId: this.toggleId,\n checked: this.checked,\n };\n }\n\n /** Sends unique toggle identifier and status when it is toggled. */\n @Event({\n eventName: 'sddsToggle',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsToggle: EventEmitter<{\n toggleId: string;\n checked: boolean;\n }>;\n\n handleToggle = () => {\n this.checked = !this.checked;\n this.sddsToggle.emit({\n toggleId: this.toggleId,\n checked: this.checked,\n });\n };\n\n render() {\n return (\n <div class=\"sdds-toggle-webcomponent\">\n {this.headline && (\n <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n )}\n <input\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n aria-checked={this.checked}\n aria-required={this.required}\n onChange={() => this.handleToggle()}\n class={`${this.size}`}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n id={this.toggleId}\n role=\"switch\"\n />\n <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n <slot name=\"label\"></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}