npm - @scania/tegel - Versions diffs - 0.0.1-beta.9 → 0.0.4 - Mend

@scania/tegel 0.0.1-beta.9 → 0.0.4

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 (897) hide show

package/dist/tegel/p-92869ad1.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as d,h as s,H as n,g as r}from"./p-0b4eba86.js";const o=":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:28px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";const t=class{constructor(s){d(this,s);this.text="";this.type="primary";this.size="lg";this.disabled=false;this.fullbleed=false;this.modeVariant=null;this.onlyIcon=false}componentWillLoad(){if(this.text===""){this.onlyIcon=true;this.host.setAttribute("only-icon","")}}render(){return s(n,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("button",{class:`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled?"disabled":""}\n ${this.fullbleed?"sdds-btn-fullbleed":""}\n ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"})))}get host(){return r(this)}};t.style=o;export{t as sdds_button};
2	+ //# sourceMappingURL=p-92869ad1.entry.js.map

package/dist/tegel/p-92869ad1.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["buttonCss","SddsButton","componentWillLoad","this","text","onlyIcon","host","setAttribute","render","h","Host","class","modeVariant","type","size","disabled","fullbleed","name"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: none;\n box-shadow: none;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n}\n\n.sdds-btn-lg {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-md {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-sm {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 16px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 16px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n fill: var(--sdds-btn-primary-icon-fill);\n color: var(--sdds-btn-primary-icon-color);\n font-size: 16px;\n}\n\n.sdds-btn {\n @include button-base;\n\n height: $btn-lg-height;\n padding: var(--sdds-spacing-element-20);\n border: 1px solid;\n\n &:disabled,\n &.disabled {\n cursor: unset;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n width: 20px;\n height: 20px;\n line-height: 0;\n }\n\n &.sdds-btn-xs {\n padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n height: $btn-xs-height;\n font-size: 12px;\n border-radius: 2px;\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n }\n\n &.sdds-btn-sm {\n padding: var(--sdds-spacing-element-12);\n height: $btn-sm-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-sm-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-24);\n width: 16px;\n height: 16px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n &.sdds-btn-md {\n padding: var(--sdds-spacing-element-16);\n height: $btn-md-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-md-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-lg {\n padding: var(--sdds-spacing-element-20);\n height: $btn-lg-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-lg-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: 28px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-fullbleed {\n width: inherit;\n display: flex;\n justify-content: center;\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-8);\n }\n }\n\n span.sdds-btn-text {\n align-self: baseline;\n }\n\n @each $type in $types {\n &.sdds-btn-#{$type} {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n color: var(--sdds-btn-icon-#{$type}-#{$prop});\n }\n\n font-size: 16px; //16px\n }\n\n &:hover {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n }\n }\n }\n\n &:focus {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n }\n }\n }\n\n &:active,\n &.active {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n }\n }\n\n &.disabled,\n &:disabled {\n @each $prop in $props {\n cursor: not-allowed;\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: var(--sdds-grey-300);\n }\n }\n }\n }\n }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n line-height: 1;\n}\n\n:host(sdds-button) {\n display: flex;\n align-items: center;\n\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n }\n}\n\n:host(sdds-button[fullbleed]) {\n width: inherit;\n justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n .sdds-btn-sm {\n padding: $btn-sm-only-icon-padding;\n }\n\n .sdds-btn-md {\n padding: $btn-md-only-icon-padding;\n }\n\n .sdds-btn-lg {\n padding: $btn-lg-only-icon-padding;\n }\n}\n\n:host(sdds-button:not([only-icon])) {\n display: flex;\n align-items: center;\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-24);\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n .sdds-btn-md {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-20);\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n .sdds-btn-lg {\n ::slotted([slot='icon']) {\n // TODO - This should be a var value\n margin-left: 28px;\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class SddsButton {\n // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n /** Text inside a button */\n @Prop() text: string = '';\n\n /** Type of button */\n @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n /** Control for disabled state of component */\n @Prop() disabled: boolean = false;\n\n /** When enabled, makes button take 100% width */\n @Prop() fullbleed: boolean = false;\n\n /** Set the mode variant of the the button. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @State() onlyIcon: boolean = false;\n\n @Element() host: HostElement;\n\n componentWillLoad() {\n if (this.text === '') {\n this.onlyIcon = true;\n this.host.setAttribute('only-icon', '');\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <button\n class={`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled ? 'disabled' : ''}\n ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n >\n <span class=\"sdds-btn-text\">{this.text}</span>\n <slot name=\"icon\" />\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,y1yB,MCQLC,EAAU,M,mCAGE,G,UAGsC,U,UAEnB,K,cAGd,M,eAGC,M,iBAGkB,K,cAElB,K,CAI7BC,oBACE,GAAIC,KAAKC,OAAS,GAAI,CACpBD,KAAKE,SAAW,KAChBF,KAAKG,KAAKC,aAAa,YAAa,G,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGR,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MACrFH,EAAA,UACEE,MAAO,qBAAqBR,KAAKU,kBAC/B,YAAYV,KAAKW,mBACjBX,KAAKY,SAAW,WAAa,eAC7BZ,KAAKa,UAAY,qBAAuB,eACxCb,KAAKE,SAAW,qBAAuB,MAEzCI,EAAA,QAAME,MAAM,iBAAiBR,KAAKC,MAClCK,EAAA,QAAMQ,KAAK,U"}

package/dist/tegel/p-93571e36.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as l,h as s,H as e,g as t}from"./p-0b4eba86.js";const i='.sdds-inline-tabs-fullbleed{box-sizing:border-box;display:flex;position:relative;}.sdds-inline-tabs-fullbleed *{box-sizing:border-box}.sdds-inline-tabs-fullbleed::after{content:" ";display:block;border-bottom:1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);opacity:var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-inline-tabs-fullbleed-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs-fullbleed--forward,.sdds-inline-tabs-fullbleed--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs-fullbleed--forward__show,.sdds-inline-tabs-fullbleed--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs-fullbleed--forward:hover,.sdds-inline-tabs-fullbleed--back:hover{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover)}.sdds-inline-tabs-fullbleed--forward:active,.sdds-inline-tabs-fullbleed--back:active{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active)}.sdds-inline-tabs-fullbleed--forward:focus,.sdds-inline-tabs-fullbleed--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs-fullbleed--forward svg,.sdds-inline-tabs-fullbleed--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs-fullbleed-centered{justify-content:center}::slotted(.sdds-inline-tabs-fullbleed--tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-fullbleed-tab-color);opacity:0.6;padding:16px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;text-align:left}::slotted(.sdds-inline-tabs-fullbleed--tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active){color:var(--sdds-inline-tabs-fullbleed-tab-color-active);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after{width:100%;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active)}::slotted(.sdds-inline-tabs-fullbleed--tab:first-child){margin-left:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:last-child){margin-right:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:hover){color:var(--sdds-inline-tabs-fullbleed-tab-color-hover);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-inline-tabs-fullbleed-tab-color-focus);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after{width:0}::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab__disabled){color:var(--sdds-inline-tabs-fullbleed-tab-color-disabled);pointer-events:none;opacity:var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled)}.sdds-inline-tabs-fullbleed{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}';const d=class{constructor(s){l(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.modeVariant=null;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const l=new ResizeObserver((l=>{l.forEach((l=>{const s=l.contentRect.width;let e=0;const t=Array.from(this.host.children);t.forEach((l=>{const s=window.getComputedStyle(l);e+=l.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);l.classList.add("sdds-inline-tabs-fullbleed--tab")}));this.componentWidth=s;this.buttonsWidth=e;this.scrollWidth=e-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));l.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let l=0;const s=Array.from(this.host.children);s.forEach((s=>{const e=window.getComputedStyle(s);const t=s.clientWidth+parseFloat(e.marginLeft)+parseFloat(e.marginRight);if(t>l){l=t}}));this.buttonWidth=l}scrollRight(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const l=this.navWrapperElement.scrollLeft;if(l>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(l<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(e,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:`sdds-inline-tabs-fullbleed`},s("div",{class:"sdds-inline-tabs-fullbleed-wrapper",ref:l=>{this.navWrapperElement=l}},s("slot",null)),s("div",{class:"sdds-inline-tabs-fullbleed-navigation"},s("button",{class:`sdds-inline-tabs-fullbleed--forward ${this.showRightScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z"}))),s("button",{class:`sdds-inline-tabs-fullbleed--back ${this.showLeftScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z"}))))))}get host(){return t(this)}};d.style=i;export{d as sdds_inline_tabs_fullbleed};
2	+ //# sourceMappingURL=p-93571e36.entry.js.map

package/dist/tegel/p-93571e36.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["inlineTabsFullbleedCss","InlineTabsFullbleed","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n @include sdds-box-sizing;\n\n display: flex;\n position: relative;\n\n &::after {\n content: ' ';\n display: block;\n border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n }\n\n &-wrapper {\n display: flex;\n flex-wrap: nowrap;\n width: 100%;\n overflow-x: scroll;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &--forward,\n &--back {\n cursor: pointer;\n width: 48px;\n height: 100%;\n border: 0;\n position: absolute;\n right: 0;\n top: 0;\n background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n\n &__show {\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n svg{\n fill:var(--sdds-inline-tabs-scroll-btn-color);\n }\n }\n\n &-centered {\n justify-content: center;\n }\n\n /* tab */\n ::slotted(&--tab) {\n //fixme: headline-07 has a line-height that is not matching old storybook\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-inline-tabs-fullbleed-tab-color);\n opacity: 0.6;\n padding: 16px 0;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out;\n white-space: nowrap;\n text-align: left;\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n \n ::slotted(&--tab__active) {\n color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n opacity:1;\n\n &::after {\n width: 100%;\n background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n }\n }\n\n ::slotted(&--tab:first-child) {\n margin-left: 32px;\n }\n\n ::slotted(&--tab:last-child) {\n margin-right: 32px;\n }\n\n /* tab states */\n ::slotted(&--tab:hover) {\n color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n opacity:1;\n\n &::after {\n width: 100%;\n }\n }\n\n ::slotted(&--tab:focus) {\n @include sdds-focus-state;\n\n color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n opacity:1;\n \n &::after {\n width: 0;\n }\n }\n\n ::slotted(&--tab__active:focus)::after {\n width: 100%;\n }\n\n ::slotted(&--tab__disabled) {\n color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n pointer-events: none;\n opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n }\n}\n\n.sdds-inline-tabs-fullbleed {\n background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n .sdds-inline-tabs-fullbleed--forward {\n background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n }\n\n .sdds-inline-tabs-fullbleed--back {\n background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tabs-fullbleed',\n styleUrl: 'inline-tabs-fullbleed.scss',\n shadow: true,\n})\nexport class InlineTabsFullbleed {\n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @Element() host: HTMLElement;\n\n @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n\n navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n componentWidth: number = 0; // visible width of this component\n\n buttonsWidth: number = 0; // total width of all nav items combined\n\n scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n buttonWidth: number = 0; // current calculated width of the largest nav button\n\n componentDidRender() {\n this.calculateButtonWidth();\n }\n\n componentDidLoad() {\n const resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n const componentWidth = entry.contentRect.width;\n let buttonsWidth = 0;\n\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n buttonsWidth +=\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n });\n\n this.componentWidth = componentWidth;\n this.buttonsWidth = buttonsWidth;\n this.scrollWidth = buttonsWidth - componentWidth;\n\n if (this.buttonsWidth > this.componentWidth) {\n this.evaluateScrollButtons();\n } else {\n this.showLeftScroll = false;\n this.showRightScroll = false;\n }\n });\n });\n\n resizeObserver.observe(this.navWrapperElement);\n\n this.calculateButtonWidth();\n }\n\n calculateButtonWidth() {\n let best = 0;\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n const width =\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n if (width > best) {\n best = width;\n }\n });\n\n this.buttonWidth = best;\n }\n\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n evaluateScrollButtons() {\n const scroll = this.navWrapperElement.scrollLeft;\n\n if (scroll >= this.scrollWidth) {\n this.showRightScroll = false;\n } else {\n this.showRightScroll = true;\n }\n\n if (scroll <= 0) {\n this.showLeftScroll = false;\n } else {\n this.showLeftScroll = true;\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <div class={`sdds-inline-tabs-fullbleed`}>\n <div\n class=\"sdds-inline-tabs-fullbleed-wrapper\"\n ref={(el) => {\n this.navWrapperElement = el as HTMLElement;\n }}\n >\n <slot />\n </div>\n <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n <button\n class={`sdds-inline-tabs-fullbleed--forward ${\n this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n }`}\n onClick={() => this.scrollRight()}\n disabled={!this.showRightScroll}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n ></path>\n </svg>\n </button>\n <button\n class={`sdds-inline-tabs-fullbleed--back ${\n this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n }`}\n onClick={() => this.scrollLeft()}\n disabled={!this.showLeftScroll}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n ></path>\n </svg>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,mqH,MCOlBC,EAAmB,M,yBAY9BC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,iBAlByB,K,UAInB,G,oBAEO,M,qBAEC,K,CAYpCC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,kCAAkC,IAG5D9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACnFH,EAAA,OAAKE,MAAO,8BACVF,EAAA,OACEE,MAAM,qCACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,yCACTF,EAAA,UACEE,MAAO,uCACL1C,KAAKiC,gBAAkB,yCAA2C,KAEpEa,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,gXAIRZ,EAAA,UACEE,MAAO,oCACL1C,KAAKgC,eAAiB,yCAA2C,KAEnEc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,wX"}

package/dist/tegel/p-9904d7ec.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as d,h as s,H as o,g as t}from"./p-0b4eba86.js";const r=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item {box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host{box-sizing:border-box;display:table-header-group}:host {box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";const a=["enableMultiselect","enableExpandableRows","verticalDividers","compactDesign","noMinWidth"];const c=class{constructor(s){e(this,s);this.mainCheckboxSelectedEvent=d(this,"mainCheckboxSelectedEvent",7);this.enableMultiselect=false;this.enableExpandableRows=false;this.mainCheckboxSelected=false;this.mainExpendSelected=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.enableToolbarDesign=false;this.tableId=""}tablePropsChangedEventListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>a.includes(e))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=e.detail[d]}))}}updateMainCheckboxEventListener(e){const[d,s]=e.detail;if(this.tableId===d){this.mainCheckboxSelected=s}}singleRowExpandedEventListener(e){if(this.tableId===e.detail[0]){setTimeout((()=>{this.bodyExpandClicked()}),100)}}bodyExpandClicked(){const e=this.host.parentElement.querySelector("sdds-table-body").getElementsByClassName("sdds-table__row-extend--active").length;const d=this.host.parentElement.querySelector("sdds-table-body").getElementsByTagName("sdds-table-body-row-expendable").length;if(d===e){this.mainExpendSelected=true}else{this.mainExpendSelected=false}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){a.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}headCheckBoxClicked(e){this.mainCheckboxSelected=e.currentTarget.checked;this.mainCheckboxSelectedEvent.emit([this.tableId,this.mainCheckboxSelected])}render(){return s(o,{class:{"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--toolbar-available":this.enableToolbarDesign}},s("tr",null,this.enableMultiselect&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"},s("div",{class:"sdds-checkbox-item"},s("label",{class:"sdds-form-label sdds-form-label--data-table"},s("input",{class:"sdds-form-input",type:"checkbox",onChange:e=>this.headCheckBoxClicked(e),checked:this.mainCheckboxSelected})))),this.enableExpandableRows&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"}),s("slot",null)))}get host(){return t(this)}};c.style=r;export{c as sdds_table_header};
2	+ //# sourceMappingURL=p-9904d7ec.entry.js.map

package/dist/tegel/p-9904d7ec.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tableHeaderCss","relevantTableProps","TableHeaderRow","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","updateMainCheckboxEventListener","receivedID","receivedMainCheckboxStatus","mainCheckboxSelected","singleRowExpandedEventListener","setTimeout","bodyExpandClicked","numberOfExtendRowsActive","host","parentElement","querySelector","getElementsByClassName","length","numberOfExtendRows","getElementsByTagName","mainExpendSelected","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","componentWillRender","enableToolbarDesign","headCheckBoxClicked","currentTarget","checked","mainCheckboxSelectedEvent","emit","render","h","Host","class","compactDesign","verticalDividers","enableMultiselect","type","onChange","e","enableExpandableRows"],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-header-group;\n\n .sdds-table__header-cell--checkbox {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-divider);\n height: 48px;\n box-sizing: border-box;\n\n // To fix issues with border-radius propagating up from button\n overflow: hidden;\n transition: background-color 200ms ease;\n min-width: unset;\n width: 48px;\n padding: 0;\n border-top-left-radius: 4px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n cursor: pointer;\n\n .sdds-table__expand-input {\n display: none;\n }\n\n .sdds-expandable-row-icon {\n height: 20px;\n width: 20px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n\n .sdds-expandable-row-icon--opened {\n transform: rotate(180deg);\n }\n }\n\n ::slotted(sdds-header-cell:hover) {\n background-color: var(--sdds-data-table-header-background-hover);\n }\n}\n\n:host(.sdds-table--compact) {\n .sdds-table__header-cell--checkbox {\n height: 32px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__header-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n\n:host(.sdds-table--toolbar-available) {\n .sdds-table__header-cell--checkbox {\n border-top-left-radius: 0;\n }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'mainCheckboxSelectedEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n mainCheckboxSelectedEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('updateMainCheckboxEvent', { target: 'body' })\n updateMainCheckboxEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('singleRowExpandedEvent', { target: 'body' })\n singleRowExpandedEventListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,g6MCGvB,MAAMC,EAAwD,CAC5D,oBACA,uBACA,mBACA,gBACA,c,MAQWC,EAAc,M,qHACa,M,0BAEG,M,0BAEA,M,wBAEF,M,sBAEF,M,mBAEH,M,gBAEH,M,qBAEK,M,yBAEI,M,aAEb,E,CAgB3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAMrDI,gCAAgCV,GAC9B,MAAOW,EAAYC,GAA8BZ,EAAMG,OACvD,GAAIF,KAAKC,UAAYS,EAAY,CAC/BV,KAAKY,qBAAuBD,C,EAKhCE,+BAA+Bd,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAO,GAAI,CAEpCY,YAAW,KACTd,KAAKe,mBAAmB,GACvB,I,EAIPA,oBACE,MAAMC,EAA2BhB,KAAKiB,KAAKC,cACxCC,cAAc,mBACdC,uBAAuB,kCAAkCC,OAC5D,MAAMC,EAAqBtB,KAAKiB,KAAKC,cAClCC,cAAc,mBACdI,qBAAqB,kCAAkCF,OAE1D,GAAIC,IAAuBN,EAA0B,CACnDhB,KAAKwB,mBAAqB,I,KACrB,CACLxB,KAAKwB,mBAAqB,K,EAI9BC,oBACEzB,KAAK0B,QAAU1B,KAAKiB,KAAKU,QAAQ,cACjC3B,KAAKC,QAAUD,KAAK0B,QAAQzB,O,CAG9B2B,oBACEhC,EAAmBW,SAASsB,IAC1B7B,KAAK6B,GAAiB7B,KAAK0B,QAAQG,EAAc,G,CAIrDC,sBACE9B,KAAK+B,oBACH/B,KAAKiB,KAAKU,QAAQ,cAAcJ,qBAAqB,sBAAsBF,QAAU,C,CAGzFW,oBAAoBjC,GAClBC,KAAKY,qBAAuBb,EAAMkC,cAAcC,QAChDlC,KAAKmC,0BAA0BC,KAAK,CAACpC,KAAKC,QAASD,KAAKY,sB,CAG1DyB,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,sBAAuBxC,KAAKyC,cAC5B,sBAAuBzC,KAAK0C,iBAC5B,gCAAiC1C,KAAK+B,sBAGxCO,EAAA,UACGtC,KAAK2C,mBACJL,EAAA,MAAIE,MAAM,6DACRF,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,+CACXF,EAAA,SACEE,MAAM,kBACNI,KAAK,WACLC,SAAWC,GAAM9C,KAAKgC,oBAAoBc,GAC1CZ,QAASlC,KAAKY,0BAMvBZ,KAAK+C,sBACJT,EAAA,MAAIE,MAAM,8DAEZF,EAAA,c"}

package/dist/tegel/p-a3741fdd.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,h as o,H as i,g as t}from"./p-0b4eba86.js";import{c as e}from"./p-ec26fc38.js";const n=":host{box-sizing:border-box;min-width:160px;min-height:160px;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";const a=class{constructor(o){s(this,o);this.selector="";this.referenceEl=undefined;this.show=false;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined}handleOutsideClick(){if(this.show){this.show=false}}componentDidLoad(){var s;this.target=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);this.renderedShowValue=this.show;this.popperInstance=e(this.target,this.popoverCanvasElement,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const o=()=>{this.show=true};const i=()=>{this.show=false};this.target.addEventListener("mousedown",(s=>{s.stopPropagation();if(this.show){i()}else{o()}}));this.popoverCanvasElement.addEventListener("mousemove",(s=>{s.stopPropagation()}));this.popoverCanvasElement.addEventListener("mousedown",(s=>{s.stopPropagation()}))}componentDidRender(){if(this.show&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.show}disconnectedCallback(){var s;(s=this.popperInstance)===null\|\|s===void 0?void 0:s.destroy()}render(){return o(i,{class:`sdds-popover-canvas ${this.show?"sdds-popover-canvas-show":""}`},o("slot",null))}get popoverCanvasElement(){return t(this)}};a.style=n;export{a as sdds_popover_canvas};
2	+ //# sourceMappingURL=p-a3741fdd.entry.js.map

package/dist/tegel/p-a3741fdd.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["popoverCanvasCss","PopoverCanvas","handleOutsideClick","this","show","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","renderedShowValue","popperInstance","createPopper","popoverCanvasElement","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","showCanvas","hideCanvas","addEventListener","event","stopPropagation","componentDidRender","update","disconnectedCallback","destroy","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n min-width: 160px;\n min-height: 160px;\n color: var(--sdds-popover-canvas-color);\n background-color: var(--sdds-popover-canvas-background);\n padding: 16px;\n box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n border-radius: 4px;\n z-index: z(tooltip);\n display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n opacity: 1;\n display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-popover-canvas',\n styleUrl: 'popover-canvas.scss',\n shadow: true,\n})\nexport class PopoverCanvas {\n @Element() popoverCanvasElement!: HTMLElement;\n\n /** The CSS-selector for an element that will trigger the popover */\n @Prop() selector: string = '';\n\n /** Element that will trigger the popover (takes priority over selector) */\n @Prop() referenceEl: HTMLElement;\n\n /** Decides if the Popover Canvas should be visible from the start */\n @Prop() show: boolean = false;\n\n /** Decides the placement of the Popover Canvas */\n @Prop() placement: Placement = 'auto';\n\n /** Sets the offset skidding */\n @Prop() offsetSkidding: number = 0;\n\n /** Sets the offset distance */\n @Prop() offsetDistance: number = 8;\n\n @State() renderedShowValue: boolean = false;\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n @Listen('mousedown', { target: 'window' })\n handleOutsideClick() {\n if (this.show) {\n this.show = false;\n }\n }\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n this.renderedShowValue = this.show;\n\n this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showCanvas = () => {\n this.show = true;\n };\n\n const hideCanvas = () => {\n this.show = false;\n };\n\n this.target.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n\n if (this.show) {\n hideCanvas();\n } else {\n showCanvas();\n }\n });\n\n this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n event.stopPropagation();\n });\n\n this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n });\n }\n\n componentDidRender() {\n if (this.show && !this.renderedShowValue) {\n // Here we update the popper position since its position is wrong\n // before it is rendered.\n this.popperInstance.update();\n }\n this.renderedShowValue = this.show;\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n render() {\n return (\n <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,qX,MCSZC,EAAa,M,uCAIG,G,qCAMH,M,eAGO,O,oBAGE,E,oBAGA,E,uBAEK,M,oDAOtCC,qBACE,GAAIC,KAAKC,KAAM,CACbD,KAAKC,KAAO,K,EAIhBC,mB,MACEF,KAAKG,QAASC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcP,KAAKQ,UAC9DR,KAAKS,kBAAoBT,KAAKC,KAE9BD,KAAKU,eAAiBC,EAAaX,KAAKG,OAAQH,KAAKY,qBAAsB,CACzEC,UAAWb,KAAKa,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACjB,KAAKkB,eAAgBlB,KAAKmB,qBAM3C,MAAMC,EAAa,KACjBpB,KAAKC,KAAO,IAAI,EAGlB,MAAMoB,EAAa,KACjBrB,KAAKC,KAAO,KAAK,EAGnBD,KAAKG,OAAOmB,iBAAiB,aAAcC,IACzCA,EAAMC,kBAEN,GAAIxB,KAAKC,KAAM,CACboB,G,KACK,CACLD,G,KAIJpB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,IAGzBxB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,G,CAI3BC,qBACE,GAAIzB,KAAKC,OAASD,KAAKS,kBAAmB,CAGxCT,KAAKU,eAAegB,Q,CAEtB1B,KAAKS,kBAAoBT,KAAKC,I,CAGhC0B,uB,OACEvB,EAAAJ,KAAKU,kBAAc,MAAAN,SAAA,SAAAA,EAAEwB,S,CAGvBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuBhC,KAAKC,KAAO,2BAA6B,MAC3E6B,EAAA,a"}

package/dist/tegel/p-a4127075.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as o,g as s}from"./p-0b4eba86.js";const i=':host{position:relative}:host sdds-icon{line-height:1}:host [role=listItem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listItem].text-below{flex-direction:column}:host [role=listItem].lg{padding:0 20px;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem].lg .content-container{height:30px;width:30px}:host [role=listItem].lg.vertical::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listItem].lg.horizontal::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:16px}:host [role=listItem].lg.horizontal::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:16px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listItem].sm{padding:0 20px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem].sm .content-container{height:24px;width:24px}:host [role=listItem].sm.vertical::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.vertical::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.horizontal::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listItem].sm.horizontal::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listItem] .content-container{border-radius:100px;border:1px solid var(--sdds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listItem] .content-container.error{border-color:var(--sdds-negative);color:var(--sdds-negative)}:host [role=listItem] .content-container.success{background-color:var(--sdds-positive);border-color:var(--sdds-positive);color:var(--sdds-white)}:host [role=listItem] .content-container.upcoming{background-color:transparent;border-color:var(--sdds-stepper-label-border-color-upcoming);color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host [role=listItem] .label{text-align:center}:host [role=listItem] .label.lg{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem] .label.sm{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem] .label.upcoming{color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listItem].sm::after,:host(.last) [role=listItem].lg::after{display:none}:host(.last) [role=listItem].sm.vertical::before{display:none}:host(.first) [role=listItem].sm::before,:host(.first) [role=listItem].lg::before{display:none}';const r=class{constructor(e){t(this,e);this.labelText="";this.state="upcoming";this.hideLabel=undefined;this.size=undefined;this.iconSize=undefined;this.direction=undefined;this.labelPosition=undefined}componentWillLoad(){this.stepperEl=this.el.closest("sdds-stepper");this.direction=this.stepperEl.direction;this.labelPosition=this.stepperEl.labelPosition;this.size=this.stepperEl.size;this.hideLabel=this.stepperEl.hideLabels}async setWidth(t){this.el.style.width=`${t}px`}render(){return e(o,null,e("div",{role:"listItem",class:`${this.size} ${this.direction} text-${this.labelPosition} ${this.hideLabel?"hide-labels":""}`},e("div",{class:`${this.state} content-container`},this.state==="success"\|\|this.state==="error"?e("sdds-icon",{name:this.state==="success"?"tick":"warning",size:this.size==="lg"?"20px":"16px"}):e("div",{class:"number sdds-detail-05"},e("slot",null))),!this.hideLabel&&e("div",{class:`label ${this.size} ${this.state}`},this.labelText)))}get el(){return s(this)}};r.style=i;export{r as sdds_stepper_item};
2	+ //# sourceMappingURL=p-a4127075.entry.js.map

package/dist/tegel/p-a4127075.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sddsStepperItemCss","SddsStepper","componentWillLoad","this","stepperEl","el","closest","direction","labelPosition","size","hideLabel","hideLabels","async","width","style","render","h","Host","role","class","state","name","labelText"],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n content: ' ';\n position: absolute;\n background-color: var(--sdds-stepper-icon-step-background-after);\n opacity: 0.16;\n}\n\n:host {\n position: relative;\n\n sdds-icon {\n line-height: 1;\n }\n\n [role='listItem'] {\n display: flex;\n justify-content: start;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n &.text-below {\n flex-direction: column;\n }\n\n &.lg {\n padding: 0 20px;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n\n .content-container {\n height: 30px;\n width: 30px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 36px;\n width: 1px;\n top: 40px;\n left: 36px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 24px);\n right: 0;\n top: 16px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n right: calc(50% + 24px);\n left: 0;\n top: 16px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n &.sm {\n padding: 0 20px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n\n .content-container {\n height: 24px;\n width: 24px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n\n &::before {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 16px + 8px);\n right: 0;\n top: 13px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n left: 0;\n right: calc(50% + 24px);\n top: 13px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n .content-container {\n border-radius: 100px;\n border: 1px solid var(--sdds-stepper-icon-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n &.error {\n border-color: var(--sdds-negative);\n color: var(--sdds-negative);\n }\n\n &.success {\n background-color: var(--sdds-positive);\n border-color: var(--sdds-positive);\n color: var(--sdds-white);\n }\n\n &.upcoming {\n background-color: transparent;\n border-color: var(--sdds-stepper-label-border-color-upcoming);\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n\n .label {\n text-align: center;\n\n &.lg {\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n }\n\n &.sm {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n }\n\n &.upcoming {\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n }\n}\n\n:host(.last) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::after {\n display: none;\n }\n }\n }\n\n [role='listItem'] {\n &.sm {\n &.vertical {\n &::before {\n display: none;\n }\n }\n }\n }\n}\n\n:host(.first) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::before {\n display: none;\n }\n }\n }\n}\n","import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-stepper-item',\n styleUrl: 'sdds-stepper-item.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** Label text for the stepper-item. */\n @Prop() labelText: string = '';\n\n /** State of the stepper-item */\n @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n @State() hideLabel: boolean;\n\n @State() size: string;\n\n @State() iconSize: string;\n\n @State() direction: string;\n\n @State() labelPosition: string;\n\n @Element() el: HTMLElement;\n\n stepperEl: HTMLSddsStepperElement;\n\n componentWillLoad() {\n this.stepperEl = this.el.closest('sdds-stepper');\n this.direction = this.stepperEl.direction;\n this.labelPosition = this.stepperEl.labelPosition;\n this.size = this.stepperEl.size;\n this.hideLabel = this.stepperEl.hideLabels;\n }\n\n /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */\n @Method()\n async setWidth(width) {\n this.el.style.width = `${width}px`;\n }\n\n render() {\n return (\n <Host>\n <div\n role=\"listItem\"\n class={`${this.size} ${this.direction} text-${this.labelPosition} ${\n this.hideLabel ? 'hide-labels' : ''\n }`}\n >\n <div class={`${this.state} content-container`}>\n {this.state === 'success' || this.state === 'error' ? (\n <sdds-icon\n name={this.state === 'success' ? 'tick' : 'warning'}\n size={this.size === 'lg' ? '20px' : '16px'}\n ></sdds-icon>\n ) : (\n <div class=\"number sdds-detail-05\">\n <slot></slot>\n </div>\n )}\n </div>\n {!this.hideLabel && (\n <div class={`label ${this.size} ${this.state}`}>{this.labelText}</div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,omI,MCOdC,EAAW,M,wCAEM,G,WAGkC,W,2HAgB9DC,oBACEC,KAAKC,UAAYD,KAAKE,GAAGC,QAAQ,gBACjCH,KAAKI,UAAYJ,KAAKC,UAAUG,UAChCJ,KAAKK,cAAgBL,KAAKC,UAAUI,cACpCL,KAAKM,KAAON,KAAKC,UAAUK,KAC3BN,KAAKO,UAAYP,KAAKC,UAAUO,U,CAKlCC,eAAeC,GACbV,KAAKE,GAAGS,MAAMD,MAAQ,GAAGA,K,CAG3BE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,KAAK,WACLC,MAAO,GAAGhB,KAAKM,QAAQN,KAAKI,kBAAkBJ,KAAKK,iBACjDL,KAAKO,UAAY,cAAgB,MAGnCM,EAAA,OAAKG,MAAO,GAAGhB,KAAKiB,2BACjBjB,KAAKiB,QAAU,WAAajB,KAAKiB,QAAU,QAC1CJ,EAAA,aACEK,KAAMlB,KAAKiB,QAAU,UAAY,OAAS,UAC1CX,KAAMN,KAAKM,OAAS,KAAO,OAAS,SAGtCO,EAAA,OAAKG,MAAM,yBACTH,EAAA,gBAIJb,KAAKO,WACLM,EAAA,OAAKG,MAAO,SAAShB,KAAKM,QAAQN,KAAKiB,SAAUjB,KAAKmB,Y"}

package/dist/tegel/p-aff4d273.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,h as d,g as o}from"./p-0b4eba86.js";const r=".sdds-block-webcomponent{box-sizing:border-box;color:var(--sdds-block-color);border-radius:4px;padding:16px;font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);background-color:var(--sdds-block-background)}.sdds-block-webcomponent *{box-sizing:border-box}.sdds-mode-variant-primary{--sdds-block-background:var(--sdds-block-background-primary);--sdds-block-background-nested:var(--sdds-block-background-nested-primary)}.sdds-mode-variant-secondary{--sdds-block-background:var(--sdds-block-background-secondary);--sdds-block-background-nested:var(--sdds-block-background-nested-secondary)}";const a=class{constructor(d){s(this,d);this.modeVariant=null}connectedCallback(){this.children=Array.from(this.host.children).filter((s=>s.tagName==="SDDS-BLOCK"));this.children.forEach((s=>{if(!this.modeVariant){s.setAttribute("mode-variant","secondary")}else{s.setAttribute("mode-variant",this.modeVariant==="primary"?"secondary":"primary")}}))}render(){return d("div",{class:`sdds-block-webcomponent ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},d("slot",null))}get host(){return o(this)}};a.style=r;export{a as sdds_block};
2	+ //# sourceMappingURL=p-aff4d273.entry.js.map

package/dist/tegel/p-aff4d273.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sddsBlockCss","SddsBlock","connectedCallback","this","children","Array","from","host","filter","item","tagName","forEach","modeVariant","setAttribute","render","h","class"],"sources":["./src/components/block/sdds-block.scss?tag=sdds-block&encapsulation=shadow","./src/components/block/sdds-block.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-block-webcomponent {\n @include sdds-box-sizing;\n\n color: var(--sdds-block-color);\n border-radius: 4px;\n padding: 16px;\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n background-color: var(--sdds-block-background);\n\n}\n.sdds-mode-variant-primary {\n --sdds-block-background: var(--sdds-block-background-primary);\n --sdds-block-background-nested: var(--sdds-block-background-nested-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-block-background: var(--sdds-block-background-secondary);\n --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-block',\n styleUrl: 'sdds-block.scss',\n shadow: true,\n})\nexport class SddsBlock {\n /** Mode variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @Element() host: HostElement;\n\n children: Array<HTMLSddsBlockElement>;\n\n connectedCallback() {\n this.children = Array.from(this.host.children).filter(\n (item) => item.tagName === 'SDDS-BLOCK',\n ) as HTMLSddsBlockElement[];\n this.children.forEach((item) => {\n if (!this.modeVariant) {\n item.setAttribute('mode-variant', 'secondary');\n } else {\n item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');\n }\n });\n }\n\n render() {\n return (\n <div\n class={`sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,ylB,MCQRC,EAAS,M,0CAE2B,I,CAM/CC,oBACEC,KAAKC,SAAWC,MAAMC,KAAKH,KAAKI,KAAKH,UAAUI,QAC5CC,GAASA,EAAKC,UAAY,eAE7BP,KAAKC,SAASO,SAASF,IACrB,IAAKN,KAAKS,YAAa,CACrBH,EAAKI,aAAa,eAAgB,Y,KAC7B,CACLJ,EAAKI,aAAa,eAAgBV,KAAKS,cAAgB,UAAY,YAAc,U,KAKvFE,SACE,OACEC,EAAA,OACEC,MAAO,2BAA2Bb,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MAEvGG,EAAA,a"}

package/dist/tegel/p-b2e46497.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as t,H as a,g as s}from"./p-0b4eba86.js";const i=":host{display:block}:host .footer-top{background-color:var(--sdds-footer-top-background);padding:40px}:host .footer-top ::slotted(){display:grid;grid-template-columns:1fr 1fr 1fr 1fr;row-gap:40px;width:100%}:host .footer-main{background-color:var(--sdds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host .footer-bottom-right ::slotted(),:host .footer-bottom-left ::slotted(){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--sdds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--sdds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host .footer-top{padding:0}:host .footer-top ::slotted(){display:block;width:100%}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host .footer-bottom-left ::slotted(*){flex-direction:column;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";const r=class{constructor(t){o(this,t);this.modeVariant=null;this.hasTopPart=undefined}connectedCallback(){const o=Array.from(this.host.children);this.hasTopPart=o.some((o=>o.slot==="top"))}render(){return t(a,{class:`${this.modeVariant?`sdds-mode-variant-${this.modeVariant}`:""}`},t("footer",null,this.hasTopPart&&t("div",{class:"footer-top"},t("slot",{name:"top"})),t("div",{class:"footer-main"},t("div",{class:"footer-main-top"},t("div",{class:"footer-bottom-left"},t("slot",{name:"main-left"})),t("div",{class:"footer-bottom-right"},t("slot",{name:"main-right"}))),t("div",{class:"footer-main-bottom"},t("small",{class:"copyright"},"Copyright © ",(new Date).getFullYear()," Scania"),t("div",{class:"brand"},t("p",null,"Scania"))))))}get host(){return s(this)}};r.style=i;export{r as sdds_footer};
2	+ //# sourceMappingURL=p-b2e46497.entry.js.map

package/dist/tegel/p-b2e46497.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sddsFooterCss","SddsFooter","connectedCallback","children","Array","from","this","host","hasTopPart","some","element","slot","render","h","Host","class","modeVariant","name","Date","getFullYear"],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n display: block;\n\n $grid-xs: 0;\n $grid-sm: 608px;\n $grid-md: 800px;\n $grid-lg: 992px;\n $grid-xlg: 1184px;\n $grid-xxlg: 1376px;\n $grid-max: 1584px;\n\n .footer-top {\n background-color: var(--sdds-footer-top-background);\n padding: 40px;\n\n ::slotted(*) {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 40px;\n width: 100%;\n }\n }\n\n .footer-main {\n background-color: var(--sdds-footer-main-background);\n padding: 0 40px;\n }\n\n .footer-main-top {\n padding: 40px 0;\n display: flex;\n justify-content: space-between;\n }\n\n .footer-bottom-right,\n .footer-bottom-left {\n ::slotted(*) {\n display: flex;\n column-gap: 24px;\n }\n }\n\n .footer-main-bottom {\n padding: 40px 0;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--sdds-footer-main-divider);\n\n small.copyright {\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-footer-main-copyright);\n }\n\n .brand {\n background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n background-repeat: no-repeat;\n background-size: 117px;\n background-position: right;\n width: 117px;\n height: 20px;\n\n p {\n color: transparent;\n padding: 0;\n margin: 0;\n height: 100%;\n visibility: hidden;\n }\n }\n }\n\n @media all and (max-width: $grid-lg) {\n .footer-top {\n padding: 0;\n\n ::slotted(*) {\n display: block;\n width: 100%;\n }\n }\n\n .footer-main {\n padding: 0 24px;\n }\n\n .footer-main-top {\n flex-direction: column;\n row-gap: 48px;\n padding: 24px 0;\n }\n\n .footer-bottom-left {\n ::slotted(*) {\n flex-direction: column;\n gap: 8px;\n }\n }\n\n .footer-main-bottom {\n flex-direction: column;\n padding-bottom: 32px;\n\n p.copyright {\n padding-bottom: 96px;\n }\n\n .brand {\n width: 100%;\n }\n }\n }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer',\n styleUrl: 'sdds-footer.scss',\n shadow: true,\n})\nexport class SddsFooter {\n /** Mode variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @State() hasTopPart: boolean;\n\n @Element() host: HostElement;\n\n connectedCallback() {\n const children = Array.from(this.host.children);\n this.hasTopPart = children.some((element) => element.slot === 'top');\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <footer>\n {this.hasTopPart && (\n <div class=\"footer-top\">\n <slot name=\"top\"></slot>\n </div>\n )}\n <div class=\"footer-main\">\n <div class=\"footer-main-top\">\n <div class=\"footer-bottom-left\">\n <slot name=\"main-left\"></slot>\n </div>\n <div class=\"footer-bottom-right\">\n <slot name=\"main-right\"></slot>\n </div>\n </div>\n <div class=\"footer-main-bottom\">\n <small class=\"copyright\">Copyright © {new Date().getFullYear()} Scania</small>\n <div class=\"brand\">\n <p>Scania</p>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,ihD,MCQTC,EAAU,M,0CAE0B,K,0BAM/CC,oBACE,MAAMC,EAAWC,MAAMC,KAAKC,KAAKC,KAAKJ,UACtCG,KAAKE,WAAaL,EAASM,MAAMC,GAAYA,EAAQC,OAAS,O,CAGhEC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGT,KAAKU,YAAc,qBAAqBV,KAAKU,cAAgB,MAC3EH,EAAA,cACGP,KAAKE,YACJK,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMI,KAAK,SAGfJ,EAAA,OAAKE,MAAM,eACTF,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMI,KAAK,iBAGfJ,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,aAAW,gBAAmB,IAAIG,MAAOC,cAAa,WACnEN,EAAA,OAAKE,MAAM,SACTF,EAAA,uB"}

package/dist/tegel/p-b2f1ec40.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as s,H as i,g as e}from"./p-0b4eba86.js";const o=":host [role=list]{display:flex;justify-content:space-evenly}:host [role=list].vertical{height:100%;flex-direction:column;justify-content:unset;gap:48px}:host [role=list].vertical.sm{gap:36px}";const l=class{constructor(s){t(this,s);this.direction="horizontal";this.labelPosition="below";this.size="lg";this.hideLabels=false;this.width=0}componentWillLoad(){this.host.children[0].classList.add("first");this.host.children[this.host.children.length-1].classList.add("last");if(this.direction==="vertical"){this.labelPosition="aside"}}componentDidLoad(){if(this.labelPosition==="below"){this.children=Array.from(this.host.children);this.children.forEach((t=>{if(t.offsetWidth>this.width){this.width=t.offsetWidth}}));this.children.forEach((t=>t.setWidth(this.width)))}}render(){return s(i,null,s("ol",{role:"list",class:`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`},s("slot",null)))}get host(){return e(this)}};l.style=o;export{l as sdds_stepper};
2	+ //# sourceMappingURL=p-b2f1ec40.entry.js.map

package/dist/tegel/p-b2f1ec40.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sddsStepperCss","SddsStepper","componentWillLoad","this","host","children","classList","add","length","direction","labelPosition","componentDidLoad","Array","from","forEach","item","offsetWidth","width","setWidth","render","h","Host","role","class","size"],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n [role='list'] {\n display: flex;\n justify-content: space-evenly;\n\n &.vertical {\n height: 100%;\n flex-direction: column;\n justify-content: unset;\n gap: 48px;\n }\n\n &.vertical.sm {\n gap: 36px;\n }\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-stepper',\n styleUrl: 'sdds-stepper.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** The direction the children are layed out. */\n @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n /** Text position, only available on direction:horizontal */\n @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n /** Size of the component and it's children. */\n @Prop() size: 'sm' | 'lg' = 'lg';\n\n /** Hides the label for the child components if true. */\n @Prop() hideLabels: boolean = false;\n\n @State() width: number = 0;\n\n @Element() host: HostElement;\n\n children: Array<HTMLSddsStepperItemElement>;\n\n componentWillLoad() {\n this.host.children[0].classList.add('first');\n this.host.children[this.host.children.length - 1].classList.add('last');\n if (this.direction === 'vertical') {\n this.labelPosition = 'aside';\n }\n }\n\n componentDidLoad() {\n if (this.labelPosition === 'below') {\n this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n this.children.forEach((item) => {\n if (item.offsetWidth > this.width) {\n this.width = item.offsetWidth;\n }\n });\n this.children.forEach((item) => item.setWidth(this.width));\n }\n }\n\n render() {\n return (\n <Host>\n <ol\n role=\"list\"\n class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n >\n <slot></slot>\n </ol>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,kM,MCQVC,EAAW,M,wCAEyB,a,mBAGJ,Q,UAGf,K,gBAGE,M,WAEL,C,CAMzBC,oBACEC,KAAKC,KAAKC,SAAS,GAAGC,UAAUC,IAAI,SACpCJ,KAAKC,KAAKC,SAASF,KAAKC,KAAKC,SAASG,OAAS,GAAGF,UAAUC,IAAI,QAChE,GAAIJ,KAAKM,YAAc,WAAY,CACjCN,KAAKO,cAAgB,O,EAIzBC,mBACE,GAAIR,KAAKO,gBAAkB,QAAS,CAClCP,KAAKE,SAAWO,MAAMC,KAAKV,KAAKC,KAAKC,UACrCF,KAAKE,SAASS,SAASC,IACrB,GAAIA,EAAKC,YAAcb,KAAKc,MAAO,CACjCd,KAAKc,MAAQF,EAAKC,W,KAGtBb,KAAKE,SAASS,SAASC,GAASA,EAAKG,SAASf,KAAKc,Q,EAIvDE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,MACEE,KAAK,OACLC,MAAO,GAAGpB,KAAKM,wCAAwCN,KAAKO,iBAAiBP,KAAKqB,QAElFJ,EAAA,c"}

package/dist/tegel/p-b9ec54c5.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,h as i,H as o,g as t}from"./p-0b4eba86.js";import{c as e}from"./p-ec26fc38.js";const d=":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";const n=class{constructor(i){s(this,i);this.selector="";this.referenceEl=undefined;this.show=false;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined}handleOutsideClick(){if(this.show){this.show=false}}componentDidLoad(){var s;this.target=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);this.renderedShowValue=this.show;this.popperInstance=e(this.target,this.popoverMenuElement,{strategy:"fixed",placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const i=()=>{this.show=true};const o=()=>{this.show=false};this.target.addEventListener("mousedown",(s=>{s.stopPropagation();if(this.show){o()}else{i()}}));this.popoverMenuElement.addEventListener("mousemove",(s=>{s.stopPropagation()}));this.popoverMenuElement.addEventListener("mousedown",(s=>{s.stopPropagation()}))}componentDidRender(){if(this.show&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.show}disconnectedCallback(){var s;(s=this.popperInstance)===null\|\|s===void 0?void 0:s.destroy()}render(){return i(o,{class:`sdds-popover-menu ${this.show?"sdds-popover-menu-show":""}`},i("slot",null))}get popoverMenuElement(){return t(this)}};n.style=d;export{n as sdds_popover_menu};
2	+ //# sourceMappingURL=p-b9ec54c5.entry.js.map

package/dist/tegel/p-b9ec54c5.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["popoverMenuCss","PopoverMenu","handleOutsideClick","this","show","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","renderedShowValue","popperInstance","createPopper","popoverMenuElement","strategy","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","showMenu","hideMenu","addEventListener","event","stopPropagation","componentDidRender","update","disconnectedCallback","destroy","render","h","Host","class"],"sources":["./src/components/popover-menu/popover-menu.scss?tag=sdds-popover-menu&encapsulation=shadow","./src/components/popover-menu/popover-menu.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n overflow: hidden;\n width: 160px;\n background-color: var(--sdds-popover-menu-background);\n padding: 16px;\n box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n border-radius: 4px;\n display: none;\n z-index: z(tooltip);\n}\n\n:host(.sdds-popover-menu-show) {\n opacity: 1;\n display: block;\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-popover-menu',\n styleUrl: 'popover-menu.scss',\n shadow: true,\n})\nexport class PopoverMenu {\n @Element() popoverMenuElement!: HTMLElement;\n\n /** The CSS-selector for an element that will trigger the popover */\n @Prop() selector: string = '';\n\n /** Element that will trigger the popover (takes priority over selector) */\n @Prop() referenceEl: HTMLElement;\n\n /** Decides if the Popover Menu should be visible from the start */\n @Prop() show: boolean = false;\n\n /** Decides the placement of the Popover Menu */\n @Prop() placement: Placement = 'auto';\n\n /** Sets the offset skidding */\n @Prop() offsetSkidding: number = 0;\n\n /** Sets the offset distance */\n @Prop() offsetDistance: number = 8;\n\n @State() renderedShowValue: boolean = false;\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n @Listen('mousedown', { target: 'window' })\n handleOutsideClick() {\n if (this.show) {\n this.show = false;\n }\n }\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n this.renderedShowValue = this.show;\n\n this.popperInstance = createPopper(this.target, this.popoverMenuElement, {\n strategy: 'fixed',\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showMenu = () => {\n this.show = true;\n };\n\n const hideMenu = () => {\n this.show = false;\n };\n\n this.target.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n\n if (this.show) {\n hideMenu();\n } else {\n showMenu();\n }\n });\n\n this.popoverMenuElement.addEventListener('mousemove', (event) => {\n event.stopPropagation();\n });\n\n this.popoverMenuElement.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n });\n }\n\n componentDidRender() {\n if (this.show && !this.renderedShowValue) {\n // Here we update the popper position since its position is wrong\n // before it is rendered.\n this.popperInstance.update();\n }\n this.renderedShowValue = this.show;\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n render() {\n return (\n <Host class={`sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,qU,MCSVC,EAAW,M,uCAIK,G,qCAMH,M,eAGO,O,oBAGE,E,oBAGA,E,uBAEK,M,oDAOtCC,qBACE,GAAIC,KAAKC,KAAM,CACbD,KAAKC,KAAO,K,EAIhBC,mB,MACEF,KAAKG,QAASC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcP,KAAKQ,UAC9DR,KAAKS,kBAAoBT,KAAKC,KAE9BD,KAAKU,eAAiBC,EAAaX,KAAKG,OAAQH,KAAKY,mBAAoB,CACvEC,SAAU,QACVC,UAAWd,KAAKc,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAClB,KAAKmB,eAAgBnB,KAAKoB,qBAM3C,MAAMC,EAAW,KACfrB,KAAKC,KAAO,IAAI,EAGlB,MAAMqB,EAAW,KACftB,KAAKC,KAAO,KAAK,EAGnBD,KAAKG,OAAOoB,iBAAiB,aAAcC,IACzCA,EAAMC,kBAEN,GAAIzB,KAAKC,KAAM,CACbqB,G,KACK,CACLD,G,KAIJrB,KAAKY,mBAAmBW,iBAAiB,aAAcC,IACrDA,EAAMC,iBAAiB,IAGzBzB,KAAKY,mBAAmBW,iBAAiB,aAAcC,IACrDA,EAAMC,iBAAiB,G,CAI3BC,qBACE,GAAI1B,KAAKC,OAASD,KAAKS,kBAAmB,CAGxCT,KAAKU,eAAeiB,Q,CAEtB3B,KAAKS,kBAAoBT,KAAKC,I,CAGhC2B,uB,OACExB,EAAAJ,KAAKU,kBAAc,MAAAN,SAAA,SAAAA,EAAEyB,S,CAGvBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,qBAAqBjC,KAAKC,KAAO,yBAA2B,MACvE8B,EAAA,a"}

package/dist/tegel/p-ba975249.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as d,g as s}from"./p-0b4eba86.js";const e=":root,.sdds-mode-light{--sdds-breadcrumb-color:var(--sdds-grey-900);--sdds-breadcrumb-color-hover:var(--sdds-grey-700);--sdds-breadcrumb-color-focus:var(--sdds-grey-700);--sdds-breadcrumb-color-disabled:var(--sdds-grey-500);--sdds-breadcrumb-separator-color:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-breadcrumb-color:var(--sdds-grey-300);--sdds-breadcrumb-color-hover:var(--sdds-grey-500);--sdds-breadcrumb-color-focus:var(--sdds-grey-500);--sdds-breadcrumb-color-disabled:var(--sdds-grey-700);--sdds-breadcrumb-separator-color:var(--sdds-grey-700)}nav ol.sdds-breadcrumb{box-sizing:border-box;padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}nav ol.sdds-breadcrumb *{box-sizing:border-box}";const a=class{constructor(d){r(this,d)}connectedCallback(){this.el.children[this.el.children.length-1].classList.add("sdds-breadcrumb-item-last")}render(){return d("nav",null,d("ol",{class:"sdds-breadcrumb"},d("slot",null)))}get el(){return s(this)}};a.style=e;export{a as sdds_breadcrumb};
2	+ //# sourceMappingURL=p-ba975249.entry.js.map

package/dist/tegel/p-ba975249.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sddsBreadcrumbCss","SddsBreadcrumb","connectedCallback","this","el","children","length","classList","add","render","h","class"],"sources":["./src/components/breadcrumb/sdds-breadcrumb.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb.tsx"],"sourcesContent":["@import 'breadcrumb-vars';\n@import '../../mixins/box-sizing';\n\nnav ol.sdds-breadcrumb {\n @include sdds-box-sizing;\n\n padding: 0;\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n flex-wrap: wrap;\n list-style-type: none;\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb',\n styleUrl: 'sdds-breadcrumb.scss',\n shadow: true,\n})\nexport class SddsBreadcrumb {\n @Element() el: HTMLElement;\n\n connectedCallback() {\n this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n }\n\n render() {\n return (\n <nav>\n <ol class={'sdds-breadcrumb'}>\n <slot></slot>\n </ol>\n </nav>\n );\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAoB,6wB,MCObC,EAAc,M,yBAGzBC,oBACEC,KAAKC,GAAGC,SAASF,KAAKC,GAAGC,SAASC,OAAS,GAAGC,UAAUC,IAAI,4B,CAG9DC,SACE,OACEC,EAAA,WACEA,EAAA,MAAIC,MAAO,mBACTD,EAAA,c"}

package/dist/tegel/p-c5537ff7.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as t,H as s,g as r}from"./p-0b4eba86.js";const e=".sc-sdds-footer-link-group-h{display:block;width:100%}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);opacity:var(--sdds-footer-top-title-opacity);color:var(--sdds-footer-top-links);padding-bottom:8px}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:none;border:none;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--sdds-footer-top-divider)}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group{border-bottom:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transform:rotateZ(180deg)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:hover{cursor:pointer}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:active{background-color:var(--sdds-footer-top-button-active)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transition:transform 0.2s ease-in-out}.sc-sdds-footer-link-group-h [role=list].sc-sdds-footer-link-group{list-style:none;padding:0;margin:0;display:flex;gap:8px}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{flex-direction:column}@media all and (max-width: 992px){.sc-sdds-footer-link-group-h [role=list].left.sc-sdds-footer-link-group:not(.top-part-child){flex-direction:column}.sc-sdds-footer-link-group-h [role=list].top-part-child.closed.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{gap:0}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:flex;align-items:center}}";const d=class{constructor(t){o(this,t);this.rightSlot=false;this.parentIsTopPart=false;this.titleText=undefined;this.open=false}connectedCallback(){this.rightSlot=this.host.parentElement.slot==="main-right";this.parentIsTopPart=this.host.parentElement.slot==="top"}render(){return t(s,null,this.titleText&&this.parentIsTopPart&&t("div",{class:"footer-top-title"},this.titleText),this.titleText&&this.parentIsTopPart&&t("button",{onClick:()=>{this.open=!this.open},class:`footer-top-title-button ${this.open?"expanded":"closed"}`},this.titleText,t("sdds-icon",{name:"chevron_down",size:"20px"})),t("div",{role:"list",class:`\n ${this.rightSlot?"right":"left"}\n ${this.parentIsTopPart?"top-part-child":""}\n ${this.open?"expanded":"closed"}\n `},t("slot",null)))}get host(){return r(this)}};d.style=e;export{d as sdds_footer_link_group};
2	+ //# sourceMappingURL=p-c5537ff7.entry.js.map

package/dist/tegel/p-c5537ff7.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sddsFooterLinkGroupCss","SddsFooterLinkGroup","this","rightSlot","parentIsTopPart","connectedCallback","host","parentElement","slot","render","h","Host","titleText","class","onClick","open","name","size","role"],"sources":["./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.scss?tag=sdds-footer-link-group&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n .footer-top-title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n opacity: var(--sdds-footer-top-title-opacity);\n color: var(--sdds-footer-top-links);\n padding-bottom: 8px;\n }\n\n button.footer-top-title-button {\n display: none;\n border: none;\n width: 100%;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-footer-top-links);\n background-color: transparent;\n text-align: left;\n padding: 19px 24px;\n justify-content: space-between;\n border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n &.expanded {\n border-bottom: none;\n\n sdds-icon {\n transform: rotateZ(180deg);\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: var(--sdds-footer-top-button-active);\n }\n\n sdds-icon {\n transition: transform 0.2s ease-in-out;\n }\n }\n\n [role='list'] {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n gap: 8px;\n\n &.top-part-child {\n flex-direction: column;\n }\n }\n\n @media all and (max-width: 992px) {\n [role='list'].left:not(.top-part-child) {\n flex-direction: column;\n }\n\n [role='list'].top-part-child.closed {\n display: none;\n }\n\n [role='list'].top-part-child {\n gap: 0;\n }\n\n .footer-top-title {\n display: none;\n }\n\n button.footer-top-title-button {\n display: flex;\n align-items: center;\n }\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer-link-group',\n styleUrl: 'sdds-footer-link-group.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsFooterLinkGroup {\n /** Title text for the link group, only valid on top part of footer. */\n @Prop() titleText: string;\n\n @Element() host: HostElement;\n\n @State() open: boolean = false;\n\n rightSlot: boolean = false;\n\n parentIsTopPart: boolean = false;\n\n connectedCallback() {\n this.rightSlot = this.host.parentElement.slot === 'main-right';\n this.parentIsTopPart = this.host.parentElement.slot === 'top';\n }\n\n render() {\n return (\n <Host>\n {this.titleText && this.parentIsTopPart && (\n <div class=\"footer-top-title\">{this.titleText}</div>\n )}\n\n {this.titleText && this.parentIsTopPart && (\n <button\n onClick={() => {\n this.open = !this.open;\n }}\n class={`footer-top-title-button ${this.open ? 'expanded' : 'closed'}`}\n >\n {this.titleText}\n <sdds-icon name=\"chevron_down\" size=\"20px\"></sdds-icon>\n </button>\n )}\n <div\n role=\"list\"\n class={`\n ${this.rightSlot ? 'right' : 'left'}\n ${this.parentIsTopPart ? 'top-part-child' : ''}\n ${this.open ? 'expanded' : 'closed'}\n `}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,olE,MCSlBC,EAAmB,M,yBAQ9BC,KAAAC,UAAqB,MAErBD,KAAAE,gBAA2B,M,mCAJF,K,CAMzBC,oBACEH,KAAKC,UAAYD,KAAKI,KAAKC,cAAcC,OAAS,aAClDN,KAAKE,gBAAkBF,KAAKI,KAAKC,cAAcC,OAAS,K,CAG1DC,SACE,OACEC,EAACC,EAAI,KACFT,KAAKU,WAAaV,KAAKE,iBACtBM,EAAA,OAAKG,MAAM,oBAAoBX,KAAKU,WAGrCV,KAAKU,WAAaV,KAAKE,iBACtBM,EAAA,UACEI,QAAS,KACPZ,KAAKa,MAAQb,KAAKa,IAAI,EAExBF,MAAO,4BAA4BX,KAAKa,KAAO,WAAa,YAE3Db,KAAKU,UACNF,EAAA,aAAWM,KAAK,eAAeC,KAAK,UAGxCP,EAAA,OACEQ,KAAK,OACLL,MAAO,aACPX,KAAKC,UAAY,QAAU,mBAC3BD,KAAKE,gBAAkB,iBAAmB,eAC1CF,KAAKa,KAAO,WAAa,sBAGzBL,EAAA,c"}

package/dist/tegel/p-c79b3861.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as s,h as t,H as a,g as i}from"./p-0b4eba86.js";const d=":host,.sdds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host ,.sdds-table {box-sizing:border-box}:host(.sdds-table--responsive),.sdds-table--responsive{width:100%}";const n=class{constructor(t){e(this,t);this.tablePropsChangedEvent=s(this,"tablePropsChangedEvent",7);this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=undefined;this.enableMultiselect=false;this.enableExpandableRows=false;this.enableResponsive=false;this.modeVariant=null;this.tableId=crypto.randomUUID()}emitTablePropsChangedEvent(e,s){this.tablePropsChangedEvent.emit({tableId:this.tableId,changed:[e],[e]:s})}enableMultiselectChanged(e){this.emitTablePropsChangedEvent("enableMultiselect",e)}enableExpandableRowsChanged(e){this.emitTablePropsChangedEvent("enableExpandableRows",e)}compactDesignChanged(e){this.emitTablePropsChangedEvent("compactDesign",e)}verticalDividersChanged(e){this.emitTablePropsChangedEvent("verticalDividers",e)}noMinWidthChanged(e){this.emitTablePropsChangedEvent("noMinWidth",e)}modeVariantChanged(e){this.emitTablePropsChangedEvent("modeVariant",e)}render(){return t(a,{class:{"sdds-table--responsive":this.enableResponsive}},t("table",{class:{"sdds-table":true,"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table--responsive":this.enableResponsive}},t("slot",null)))}get host(){return i(this)}static get watchers(){return{enableMultiselect:["enableMultiselectChanged"],enableExpandableRows:["enableExpandableRowsChanged"],compactDesign:["compactDesignChanged"],verticalDividers:["verticalDividersChanged"],noMinWidth:["noMinWidthChanged"],modeVariant:["modeVariantChanged"]}}};n.style=d;export{n as sdds_table};
2	+ //# sourceMappingURL=p-c79b3861.entry.js.map

package/dist/tegel/p-c79b3861.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tableCss","Table","crypto","randomUUID","emitTablePropsChangedEvent","changedValueName","changedValue","this","tablePropsChangedEvent","emit","tableId","changed","enableMultiselectChanged","newValue","enableExpandableRowsChanged","compactDesignChanged","verticalDividersChanged","noMinWidthChanged","modeVariantChanged","render","h","Host","class","enableResponsive","compactDesign","verticalDividers","noMinWidth"],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n border-collapse: collapse;\n display: table;\n @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n verticalDividers: boolean;\n compactDesign: boolean;\n noMinWidth: boolean;\n enableMultiselect: boolean;\n enableExpandableRows: boolean;\n enableResponsive: boolean;\n modeVariant: 'primary' | 'secondary' | null;\n};\n\nexport type TablePropsChangedEvent = {\n tableId: string;\n changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n tag: 'sdds-table',\n styleUrl: 'table.scss',\n shadow: true,\n})\nexport class Table {\n /** Enables style with vertical dividers between columns */\n @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n /** Enables style where data-table toolbar, rows and footer are less high */\n @Prop({ reflect: true }) compactDesign: boolean = false;\n\n /** Enables to customise width on data-table columns */\n @Prop({ reflect: true }) noMinWidth: boolean;\n // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n /** Enables multiselect feature of data-table */\n @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n /** Enables extended row feature of data-table */\n @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n /** Enables table to take 100% available width with equal spacing of columns */\n @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n /** Variant of the component, based on current mode. */\n @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n /** ID used for internal table functionality and events, must be unique.\n *\n * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n */\n @Prop() tableId: string = crypto.randomUUID();\n\n @Element() host: HTMLElement;\n\n /** Broadcasts changes to the tables props */\n @Event({\n eventName: 'tablePropsChangedEvent',\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n this.tablePropsChangedEvent.emit({\n tableId: this.tableId,\n changed: [changedValueName],\n [changedValueName]: changedValue,\n });\n }\n\n @Watch('enableMultiselect')\n enableMultiselectChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n }\n\n @Watch('enableExpandableRows')\n enableExpandableRowsChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n }\n\n @Watch('compactDesign')\n compactDesignChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('compactDesign', newValue);\n }\n\n @Watch('verticalDividers')\n verticalDividersChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('verticalDividers', newValue);\n }\n\n @Watch('noMinWidth')\n noMinWidthChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('noMinWidth', newValue);\n }\n\n @Watch('modeVariant')\n modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n this.emitTablePropsChangedEvent('modeVariant', newValue);\n }\n\n render() {\n return (\n <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n <table\n class={{\n 'sdds-table': true,\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--responsive': this.enableResponsive,\n }}\n >\n <slot />\n </table>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,gM,MCyBJC,EAAK,M,8GAEqC,M,mBAGH,M,iDAOI,M,0BAGG,M,sBAGJ,M,iBAGW,K,aAMtCC,OAAOC,Y,CAajCC,2BAA2BC,EAA+BC,GACxDC,KAAKC,uBAAuBC,KAAK,CAC/BC,QAASH,KAAKG,QACdC,QAAS,CAACN,GACVA,CAACA,GAAmBC,G,CAKxBM,yBAAyBC,GACvBN,KAAKH,2BAA2B,oBAAqBS,E,CAIvDC,4BAA4BD,GAC1BN,KAAKH,2BAA2B,uBAAwBS,E,CAI1DE,qBAAqBF,GACnBN,KAAKH,2BAA2B,gBAAiBS,E,CAInDG,wBAAwBH,GACtBN,KAAKH,2BAA2B,mBAAoBS,E,CAItDI,kBAAkBJ,GAChBN,KAAKH,2BAA2B,aAAcS,E,CAIhDK,mBAAmBL,GACjBN,KAAKH,2BAA2B,cAAeS,E,CAGjDM,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,CAAE,yBAA0Bf,KAAKgB,mBAC5CH,EAAA,SACEE,MAAO,CACL,aAAc,KACd,sBAAuBf,KAAKiB,cAC5B,sBAAuBjB,KAAKkB,iBAC5B,2BAA4BlB,KAAKmB,WACjC,yBAA0BnB,KAAKgB,mBAGjCH,EAAA,c"}

package/dist/tegel/p-cd08f5f0.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as d,c as o,h as s,H as c}from"./p-0b4eba86.js";const i=".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-color);position:relative;border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item {box-sizing:border-box}.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{all:unset}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end,.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-background)}.sdds-accordion-item .sdds-accordion-header-icon-start ,.sdds-accordion-item .sdds-accordion-header-icon-end ,.sdds-accordion-item button.sdds-accordion-header-icon-start ,.sdds-accordion-item button.sdds-accordion-header-icon-end {box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-color)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon{display:block}.sdds-accordion-item .sdds-accordion-title{flex-grow:2}.sdds-accordion-item .sdds-accordion-panel{cursor:default;padding:var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);display:none;font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls)}.sdds-accordion-item .sdds-accordion-panel p{margin:0;padding:0}.sdds-accordion-item .sdds-accordion-panel--padding-reset{padding-right:var(--sdds-spacing-element-16)}.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{margin:0 0 0 var(--sdds-spacing-element-32)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title{order:1}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon{order:0;margin:0 var(--sdds-spacing-element-16) 0 0}.sdds-accordion-item.disabled,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled .sdds-accordion-panel{color:var(--sdds-accordion-color-disabled);cursor:not-allowed}.sdds-accordion-item.disabled .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon{color:var(--sdds-accordion-color-disabled)}.sdds-accordion-item.disabled:hover,.sdds-accordion-item.disabled:hover ,.sdds-accordion-item.disabled:focus,.sdds-accordion-item.disabled:focus ,.sdds-accordion-item.disabled:active,.sdds-accordion-item.disabled:active ,.sdds-accordion-item.disabled.active,.sdds-accordion-item.disabled.active *{cursor:not-allowed}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after{border-color:transparent}.sdds-accordion-item.expanded .sdds-accordion-panel{display:block;padding-bottom:31px}.sdds-accordion-item.expanded .sdds-accordion-icon{transform:rotate(180deg)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon{margin-right:0;margin-left:var(--sdds-spacing-element-32)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon{margin-left:0;margin-right:var(--sdds-spacing-element-16)}.sdds-accordion-item:focus{border-top:1px solid var(--sdds-accordion-border-focus)}.sdds-accordion-item[disabled=true]:focus{border-color:var(--sdds-accordion-border)}:host(:focus) .sdds-accordion-item{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}";const a=class{constructor(s){d(this,s);this.sddsToggle=o(this,"sddsToggle",7);this.header="";this.expandIconPosition="end";this.disabled=false;this.expanded=false;this.paddingReset=false}openAccordion(){this.expanded=!this.expanded;this.sddsToggle.emit(this.expanded)}render(){return s(c,null,s("div",{class:`sdds-accordion-item\n ${this.disabled?"disabled":""}\n ${this.expanded?"expanded":""}\n `},s("button",{type:"button","aria-expanded":this.expanded,class:`sdds-accordion-header-icon-${this.expandIconPosition}`,onClick:()=>this.openAccordion(),disabled:this.disabled},s("div",{class:"sdds-accordion-title"},this.header),s("div",{class:"sdds-accordion-icon"},s("sdds-icon",{name:"chevron_down",size:"16px"}))),s("div",{class:`sdds-accordion-panel\n ${this.paddingReset?"sdds-accordion-panel--padding-reset ":""}\n `},s("slot",null))))}};a.style=i;export{a as sdds_accordion_item};
2	+ //# sourceMappingURL=p-cd08f5f0.entry.js.map

package/dist/tegel/p-cd08f5f0.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["accordionItemCss","AccordionItem","openAccordion","this","expanded","sddsToggle","emit","render","h","Host","class","disabled","type","expandIconPosition","onClick","header","name","size","paddingReset"],"sources":["./src/components/accordion/accordion-item/accordion-item.scss?tag=sdds-accordion-item&encapsulation=shadow","./src/components/accordion/accordion-item/accordion-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/disabled-style';\n@import '../../../mixins/box-sizing';\n\n.sdds-accordion-item {\n @include sdds-box-sizing;\n\n list-style: none;\n color: var(--sdds-accordion-color);\n position: relative;\n\n button.sdds-accordion-header-icon-start,\n button.sdds-accordion-header-icon-end {\n all: unset;\n }\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end,\n button.sdds-accordion-header-icon-start,\n button.sdds-accordion-header-icon-end {\n @include sdds-box-sizing;\n\n cursor: pointer;\n display: flex;\n align-items: center;\n width: 100%;\n\n // fixme: wrong line-height compared to production\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding: var(--sdds-spacing-element-16);\n background-color: var(--sdds-accordion-background);\n\n .sdds-accordion-icon {\n transform-origin: center;\n transition: transform 0.15s ease-in-out;\n color: var(--sdds-accordion-color);\n\n & > sdds-icon {\n display: block;\n }\n }\n }\n\n .sdds-accordion-title {\n flex-grow: 2;\n }\n\n .sdds-accordion-panel {\n cursor: default;\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64)\n var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);\n display: none;\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n\n p {\n margin: 0;\n padding: 0;\n }\n\n &--padding-reset {\n padding-right: var(--sdds-spacing-element-16);\n }\n }\n\n .sdds-accordion-header-icon-end {\n .sdds-accordion-icon {\n margin: 0 0 0 var(--sdds-spacing-element-32);\n }\n }\n\n .sdds-accordion-header-icon-start {\n .sdds-accordion-title {\n order: 1;\n }\n\n .sdds-accordion-icon {\n order: 0;\n margin: 0 var(--sdds-spacing-element-16) 0 0;\n }\n }\n\n &.disabled {\n &,\n .sdds-accordion-header-icon-end,\n .sdds-accordion-header-icon-start,\n .sdds-accordion-panel {\n color: var(--sdds-accordion-color-disabled);\n cursor: not-allowed;\n\n .sdds-accordion-icon {\n color: var(--sdds-accordion-color-disabled);\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n @include disabledStyle;\n }\n }\n\n &.expanded {\n .sdds-accordion-panel {\n display: block;\n padding-bottom: 31px;\n }\n\n .sdds-accordion-icon {\n transform: rotate(180deg);\n }\n\n .sdds-accordion-header-icon-end {\n .sdds-accordion-icon {\n margin-right: 0;\n margin-left: var(--sdds-spacing-element-32);\n }\n }\n\n .sdds-accordion-header-icon-start {\n .sdds-accordion-icon {\n margin-left: 0;\n margin-right: var(--sdds-spacing-element-16);\n }\n }\n }\n\n border-top: 1px solid var(--sdds-accordion-border);\n\n &:focus {\n border-top: 1px solid var(--sdds-accordion-border-focus);\n }\n\n &[disabled='true']:focus {\n border-color: var(--sdds-accordion-border);\n }\n}\n\n:host(:focus) {\n .sdds-accordion-item {\n @include sdds-focus-state;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n }\n }\n}\n\n:host(:hover) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-hover);\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion-item',\n styleUrl: 'accordion-item.scss',\n shadow: true,\n})\nexport class AccordionItem {\n /** The header gives users the context about the additional information available inside the panel */\n @Prop() header: string = '';\n\n /** Changes where the expand icon is placed. */\n @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n /** Disabled option in `boolean`. */\n @Prop() disabled: boolean = false;\n\n /** Set to true to expand panel open */\n @Prop() expanded: boolean = false;\n\n /** When true 16px on right padding instead of 64px */\n @Prop() paddingReset: boolean = false;\n\n /** Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n @Event({\n eventName: 'sddsToggle',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggle: EventEmitter<boolean>;\n\n openAccordion() {\n this.expanded = !this.expanded;\n this.sddsToggle.emit(this.expanded);\n }\n\n render() {\n return (\n <Host>\n <div\n class={`sdds-accordion-item\n ${this.disabled ? 'disabled' : ''}\n ${this.expanded ? 'expanded' : ''}\n `}\n >\n <button\n type=\"button\"\n aria-expanded={this.expanded}\n class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n onClick={() => this.openAccordion()}\n disabled={this.disabled}\n >\n <div class=\"sdds-accordion-title\">{this.header}</div>\n <div class=\"sdds-accordion-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </div>\n </button>\n <div\n class={`sdds-accordion-panel\n ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n `}\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,i8L,MCOZC,EAAa,M,4EAEC,G,wBAGqB,M,cAGlB,M,cAGA,M,kBAGI,K,CAWhCC,gBACEC,KAAKC,UAAYD,KAAKC,SACtBD,KAAKE,WAAWC,KAAKH,KAAKC,S,CAG5BG,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,gCACPP,KAAKQ,SAAW,WAAa,eAC7BR,KAAKC,SAAW,WAAa,gBAG7BI,EAAA,UACEI,KAAK,SAAQ,gBACET,KAAKC,SACpBM,MAAO,8BAA8BP,KAAKU,qBAC1CC,QAAS,IAAMX,KAAKD,gBACpBS,SAAUR,KAAKQ,UAEfH,EAAA,OAAKE,MAAM,wBAAwBP,KAAKY,QACxCP,EAAA,OAAKE,MAAM,uBACTF,EAAA,aAAWQ,KAAK,eAAeC,KAAK,WAGxCT,EAAA,OACEE,MAAO,qCACLP,KAAKe,aAAe,uCAAyC,oBAG/DV,EAAA,e"}

package/dist/tegel/p-d910763a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as d,c as e,h as s}from"./p-0b4eba86.js";const t=':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 i=class{constructor(s){d(this,s);this.sddsChange=e(this,"sddsChange",6);this.sddsInput=e(this,"sddsInput",6);this.sddsFocus=e(this,"sddsFocus",6);this.sddsBlur=e(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(d){this.sddsChange.emit(d)}handleInput(d){this.sddsInput.emit(d);this.value=d.target.value}handleFocus(d){this.textInput.focus();this.focusInput=true;this.sddsFocus.emit(d)}handleBlur(d){this.focusInput=false;this.sddsBlur.emit(d)}render(){var d;let e=" sdds-textfield-input";if(this.size==="md"){e+=`${e}-md`}if(this.size==="sm"){e+=`${e}-sm`}return s("div",{class:`\n ${this.noMinWidth?"sdds-form-textfield-nomin":""}\n ${this.focusInput&&!this.disabled?"sdds-form-textfield sdds-textfield-focus":" sdds-form-textfield"}\n ${this.value?"sdds-textfield-data":""}\n ${this.labelPosition==="inside"&&this.size!=="sm"?"sdds-textfield-container-label-inside":""}\n ${this.disabled?"sdds-form-textfield-disabled":""}\n ${this.readOnly?"sdds-form-textfield-readonly":""}\n ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n ${this.size==="md"?"sdds-form-textfield-md":""}\n ${this.size==="sm"?"sdds-form-textfield-sm":""}\n ${this.state==="error"\|\|this.state==="success"?`sdds-form-textfield-${this.state}`:""}\n `},this.labelPosition==="outside"&&s("div",{class:"sdds-textfield-label-outside"},s("div",null,this.label)),s("div",{onClick:()=>this.textInput.focus(),class:"sdds-textfield-container"},s("div",{class:`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`},s("slot",{name:"sdds-prefix"})),s("div",{class:"sdds-textfield-input-container"},s("input",{ref:d=>this.textInput=d,class:e,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:d=>this.handleInput(d),onChange:d=>this.handleChange(d),onFocus:d=>{if(!this.readOnly){this.handleFocus(d)}},onBlur:d=>{if(!this.readOnly){this.handleBlur(d)}}}),this.labelPosition==="inside"&&this.size!=="sm"&&s("label",{class:"sdds-textfield-label-inside"},this.label)),s("div",{class:"sdds-textfield-bar"}),s("div",{class:`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`},s("slot",{name:"sdds-suffix"})),s("span",{class:"sdds-textfield-icon__readonly"},s("sdds-icon",{name:"edit_inactive",size:"20px"})),s("span",{class:"sdds-textfield-icon__readonly-label"},"This field is non-editable")),s("div",{class:"sdds-textfield-helper"},this.state==="error"&&s("div",{class:"sdds-textfield-helper-error-state"},s("sdds-icon",{name:"error",size:"16px"}),this.helper),this.state!=="error"&&this.helper,this.maxLength>0&&s("div",{class:"sdds-textfield-textcounter"},this.value===null?0:(d=this.value)===null\|\|d===void 0?void 0:d.length,s("span",{class:"sdds-textfield-textcounter-divider"}," / "),this.maxLength)))}};i.style=t;export{i as sdds_textfield};
2	+ //# sourceMappingURL=p-d910763a.entry.js.map

package/dist/tegel/p-d910763a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["textfieldCss","Textfield","handleChange","event","this","sddsChange","emit","handleInput","sddsInput","value","target","handleFocus","textInput","focus","focusInput","sddsFocus","handleBlur","sddsBlur","render","className","size","h","class","noMinWidth","disabled","labelPosition","readOnly","modeVariant","state","label","onClick","name","ref","inputEl","type","readonly","placeholder","autofocus","maxlength","maxLength","onInput","onChange","onFocus","onBlur","helper","_a","length"],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield","./src/components/textfield/textfield.tsx"],"sourcesContent":["@import './textfield-vars.scss';\n\n@mixin textfield-base {\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 ~ .sdds-textfield-label-inside {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Sizes\n.sdds-textfield-input {\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.sdds-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.sdds-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.sdds-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 .sdds-form-textfield-md & {\n height: 48px;\n }\n\n .sdds-form-textfield-sm & {\n height: 40px;\n }\n}\n\n.sdds-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.sdds-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.sdds-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.sdds-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.sdds-form-textfield.sdds-textfield-container-label-inside {\n .sdds-textfield-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-textfield-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-textfield-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-textfield-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-textfield-focus,\n &.sdds-textfield-data {\n .sdds-textfield-input-sm ~ .sdds-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 .sdds-textfield-input-md ~ .sdds-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 .sdds-textfield-input ~ .sdds-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.sdds-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 .sdds-form-textfield-md & {\n top: 46px;\n }\n\n .sdds-form-textfield-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-textfield-focus &::before,\n .sdds-textfield-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-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 & .sdds-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.sdds-form-textfield-disabled {\n .sdds-textfield-container {\n border-bottom-color: transparent;\n }\n\n .sdds-textfield-slot-wrap-prefix,\n .sdds-textfield-slot-wrap-suffix {\n > * {\n color: var(--sdds-textfield-ps-color-disabled);\n }\n }\n\n .sdds-textfield-label-outside {\n > * {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Read only state\n\n.sdds-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.sdds-form-textfield-readonly {\n pointer-events: none;\n\n .sdds-textfield-icon__readonly {\n display: block;\n\n &:hover {\n ~ .sdds-textfield-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .sdds-textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n}\n\n//Success state\n.sdds-form-textfield-success {\n .sdds-textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-success);\n }\n}\n\n//Error State\n.sdds-form-textfield-error {\n .sdds-textfield-helper {\n color: var(--sdds-textfield-helper-error);\n }\n\n .sdds-textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-error);\n }\n\n .sdds-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// .sdds-textfield-textcounter {\n.sdds-textfield-helper-error-state {\n display: flex;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n.sdds-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 & .sdds-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.sdds-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 &.sdds-textfield-error {\n sdds-icon,\n .sdds-icon {\n color: var(--sdds-negative);\n }\n }\n}\n\n.sdds-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 &.sdds-textfield-error {\n sdds-icon,\n .sdds-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 & ~ .sdds-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})\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 let className = ' sdds-textfield-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}\n ${\n this.focusInput && !this.disabled\n ? 'sdds-form-textfield sdds-textfield-focus'\n : ' sdds-form-textfield'\n }\n ${this.value ? 'sdds-textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'sdds-textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'sdds-form-textfield-disabled' : ''}\n ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}\n ${\n this.state === 'error' || this.state === 'success'\n ? `sdds-form-textfield-${this.state}`\n : ''\n }\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"sdds-textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"sdds-textfield-container\">\n <div class={`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`}>\n <slot name=\"sdds-prefix\" />\n </div>\n\n <div class=\"sdds-textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\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=\"sdds-textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"sdds-textfield-bar\"></div>\n\n <div class={`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`}>\n <slot name=\"sdds-suffix\" />\n </div>\n <span class=\"sdds-textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"sdds-textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"sdds-textfield-helper\">\n {this.state === 'error' && (\n <div class=\"sdds-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=\"sdds-textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"sdds-textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,+nf,MCORC,EAAS,M,uLAKiC,O,mBAGM,W,WAGnC,G,uCAMM,G,WAGW,G,cAGb,M,cAGA,M,UAGO,K,iBAIY,K,gBAGjB,M,UAGf,G,WAGkC,U,wCAMpB,M,0BAc7BC,aAAaC,GACXC,KAAKC,WAAWC,KAAKH,E,CAavBI,YAAYJ,GACVC,KAAKI,UAAUF,KAAKH,GACpBC,KAAKK,MAAQN,EAAMO,OAAOD,K,CAa5BE,YAAYR,GACVC,KAAKQ,UAAUC,QACfT,KAAKU,WAAa,KAClBV,KAAKW,UAAUT,KAAKH,E,CAatBa,WAAWb,GACTC,KAAKU,WAAa,MAClBV,KAAKa,SAASX,KAAKH,E,CAGrBe,S,MACE,IAAIC,EAAY,wBAChB,GAAIf,KAAKgB,OAAS,KAAM,CACtBD,GAAa,GAAGA,M,CAElB,GAAIf,KAAKgB,OAAS,KAAM,CACtBD,GAAa,GAAGA,M,CAElB,OACEE,EAAA,OACEC,MAAO,aACLlB,KAAKmB,WAAa,4BAA8B,eAEhDnB,KAAKU,aAAeV,KAAKoB,SACrB,2CACA,mCAEJpB,KAAKK,MAAQ,sBAAwB,eAErCL,KAAKqB,gBAAkB,UAAYrB,KAAKgB,OAAS,KAC7C,wCACA,eAEJhB,KAAKoB,SAAW,+BAAiC,eACjDpB,KAAKsB,SAAW,+BAAiC,eACjDtB,KAAKuB,cAAgB,KAAO,qBAAqBvB,KAAKuB,cAAgB,eACtEvB,KAAKgB,OAAS,KAAO,yBAA2B,eAChDhB,KAAKgB,OAAS,KAAO,yBAA2B,eAEhDhB,KAAKwB,QAAU,SAAWxB,KAAKwB,QAAU,UACrC,uBAAuBxB,KAAKwB,QAC5B,gBAILxB,KAAKqB,gBAAkB,WACtBJ,EAAA,OAAKC,MAAM,gCACTD,EAAA,WAAMjB,KAAKyB,QAGfR,EAAA,OAAKS,QAAS,IAAM1B,KAAKQ,UAAUC,QAASS,MAAM,4BAChDD,EAAA,OAAKC,MAAO,kDAAkDlB,KAAKwB,SACjEP,EAAA,QAAMU,KAAK,iBAGbV,EAAA,OAAKC,MAAM,kCACTD,EAAA,SACEW,IAAMC,GAAa7B,KAAKQ,UAAYqB,EACpCX,MAAOH,EACPe,KAAM9B,KAAK8B,KACXV,SAAUpB,KAAKoB,SACfW,SAAU/B,KAAKsB,SACfU,YAAahC,KAAKgC,YAClB3B,MAAOL,KAAKK,MACZ4B,UAAWjC,KAAKiC,UAChBC,UAAWlC,KAAKmC,UAChBR,KAAM3B,KAAK2B,KACXS,QAAUrC,GAAUC,KAAKG,YAAYJ,GACrCsC,SAAWtC,GAAUC,KAAKF,aAAaC,GACvCuC,QAAUvC,IACR,IAAKC,KAAKsB,SAAU,CAClBtB,KAAKO,YAAYR,E,GAGrBwC,OAASxC,IACP,IAAKC,KAAKsB,SAAU,CAClBtB,KAAKY,WAAWb,E,KAKrBC,KAAKqB,gBAAkB,UAAYrB,KAAKgB,OAAS,MAChDC,EAAA,SAAOC,MAAM,+BAA+BlB,KAAKyB,QAGrDR,EAAA,OAAKC,MAAM,uBAEXD,EAAA,OAAKC,MAAO,kDAAkDlB,KAAKwB,SACjEP,EAAA,QAAMU,KAAK,iBAEbV,EAAA,QAAMC,MAAM,iCACVD,EAAA,aAAWU,KAAK,gBAAgBX,KAAK,UAEvCC,EAAA,QAAMC,MAAM,uCAAqC,+BAGnDD,EAAA,OAAKC,MAAM,yBACRlB,KAAKwB,QAAU,SACdP,EAAA,OAAKC,MAAM,qCACTD,EAAA,aAAWU,KAAK,QAAQX,KAAK,SAC5BhB,KAAKwC,QAGTxC,KAAKwB,QAAU,SAAWxB,KAAKwC,OAE/BxC,KAAKmC,UAAY,GAChBlB,EAAA,OAAKC,MAAM,8BACRlB,KAAKK,QAAU,KAAO,GAAIoC,EAAAzC,KAAKK,SAAK,MAAAoC,SAAA,SAAAA,EAAEC,OACvCzB,EAAA,QAAMC,MAAM,sCAAoC,OAC/ClB,KAAKmC,Y"}

package/dist/tegel/p-e25424af.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,h as t,H as l}from"./p-0b4eba86.js";const n=":host{display:block}";const e=class{constructor(t){s(this,t);this.label=undefined;this.disabled=false;this.default=false}render(){return t(l,null,t("slot",null))}};e.style=n;export{e as sdds_inline_tab};
2	+ //# sourceMappingURL=p-e25424af.entry.js.map

package/dist/tegel/p-e25424af.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["inlineTabCss","InlineTabsChild","render","h","Host"],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tab',\n styleUrl: 'inline-tab.scss',\n shadow: true,\n})\nexport class InlineTabsChild {\n @Prop() label: string;\n\n @Prop() disabled: boolean = false;\n\n @Prop() default: boolean = false;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,uB,MCORC,EAAe,M,4DAGE,M,aAED,K,CAE3BC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/tegel/p-e5e10d8f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as e}from"./p-0b4eba86.js";const n="a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";const s=class{constructor(e){o(this,e);this.href=undefined;this.target="_self";this.disabled=false;this.underline=true;this.rel="noopener"}render(){return e("a",{class:`\n ${this.disabled?"disabled":""}\n ${this.underline?"":"no-underline"}\n \n `,href:this.href,target:this.target,rel:this.rel},e("slot",null))}};s.style=n;export{s as sdds_link};
2	+ //# sourceMappingURL=p-e5e10d8f.entry.js.map