npm - @scania/tegel - Versions diffs - 0.0.52 → 0.0.71-beta - Mend

@scania/tegel 0.0.52 → 0.0.71-beta

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

package/dist/components/sdds-footer.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-footer.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhDA,YAAU;;;;;uBAE0B,IAAI;;;EAMnD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;GACtE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,kBACG,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnF,WAAK,KAAK,EAAC,OAAO,IAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooter"],"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"],"version":3}

package/dist/components/sdds-header-cell.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-header-cell.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-header-cell/table-header-cell.scss?tag=sdds-header-cell&encapsulation=shadow","./src/components/data-table/table-header-cell/table-header-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__header-cell) {\n @include sdds-box-sizing;\n\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-header-background-hover);\n padding: 0;\n height: 48px;\n min-width: 192px;\n box-sizing: border-box;\n vertical-align: middle;\n overflow: hidden;\n transition: background-color 200ms ease;\n\n .sdds-table__header-text {\n padding: 0 16px;\n margin: 0;\n }\n}\n\n:host(.sdds-table__header-cell--sortable) {\n .sdds-table__header-button {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: start;\n flex-direction: row;\n width: 100%;\n height: 100%;\n padding: 0 16px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: background-color 200ms ease;\n\n &:focus {\n outline: 2px solid var(--sdds-data-table-header-btn-focus);\n outline-offset: -2px;\n\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n }\n\n .sdds-table__header-button-text {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n text-align: left;\n color: var(--sdds-data-table-header-btn-color);\n }\n\n .sdds-table__header-button-icon {\n /* not to shrink on lot of text */\n flex: 0 0 16px;\n height: 16px;\n opacity: 0;\n transform-origin: center;\n transition: opacity 200ms ease-in, transform 200ms ease;\n fill: var(--sdds-data-table-color);\n }\n\n &:hover {\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n }\n }\n}\n\n:host(.sdds-table__header-cell--right-align) {\n .sdds-table__header-button {\n text-align: right;\n justify-content: end;\n flex-direction: row-reverse;\n }\n}\n\n:host(.sdds-table__header-cell--is-sorted) {\n .sdds-table__header-button {\n background-color: var(--sdds-data-table-header-btn-background);\n\n &:hover {\n background-color: var(--sdds-data-table-header-btn-background-hover);\n }\n\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n\n .sdds-table__header-button-icon--rotate {\n transform: rotate(180deg);\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 33px;\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n\n// border-radius style control\n// it depends id multiselect si on or off, same for if toolbar is there or not\n:host(.sdds-table__header-cell:first-of-type) {\n border-top-left-radius: 4px;\n}\n\n:host(.sdds-table__header-cell:last-of-type) {\n border-top-right-radius: 4px;\n}\n\n:host(.sdds-table--extra-column:first-of-type) {\n border-top-left-radius: 0;\n}\n\n:host(.sdds-table--toolbar-available) {\n border-radius: 0;\n}\n\n:host(.sdds-table--extra-column.sdds-table--toolbar-available) {\n border-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type) {\n border-top-left-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type) {\n border-top-right-radius: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Event,\n EventEmitter,\n State,\n Listen,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-header-cell',\n styleUrl: 'table-header-cell.scss',\n shadow: true,\n})\nexport class TableHeaderCell {\n /** Value of column key, usually comes from JSON, needed for sorting */\n @Prop({ reflect: true }) columnKey: string;\n\n /** Text that displays in column cell */\n @Prop({ reflect: true }) columnTitle: string;\n\n /** In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" */\n @Prop({ reflect: true }) customWidth: string;\n\n /** If passed as prop, enables sorting on that column */\n @Prop() sortable: boolean = false;\n\n /** Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values */\n @Prop({ reflect: true }) textAlign: string;\n\n @State() textAlignState: string;\n\n @State() sortingDirection: string = '';\n\n @State() sortedByMyKey: boolean = false;\n\n @State() disableSortingBtn: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() enableMultiselect: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @State() enableExpandableRows: boolean = false;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic. */\n @Event({\n eventName: 'sddsSortChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsSortChange: EventEmitter<any>;\n\n /** @internal Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell */\n @Event({\n eventName: 'internalSddsTextAlign',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsTextAlign: EventEmitter<any>;\n\n /** @internal Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell */\n @Event({\n eventName: 'internalSddsHover',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsHover: EventEmitter<any>;\n\n @Listen('internalSddsPropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\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 to parent data-table if sorting is allowed\n @Listen('internalSddsSortingChange', { target: 'body' })\n internalSddsSortingChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedSortingStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.disableSortingBtn = receivedSortingStatus;\n }\n }\n\n // target is set to body so other instances of same component \"listen\" and react to the change\n @Listen('sddsSortChange', { target: 'body' })\n updateOptionsContent(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // grab only value at position 1 as it is the \"key\"\n if (this.columnKey !== event.detail[1]) {\n this.sortedByMyKey = false;\n // To sync with CSS transition timing\n setTimeout(() => {\n this.sortingDirection = '';\n }, 200);\n }\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 // enable only right or left text align\n if (this.textAlign === 'right' || this.textAlign === 'end') {\n this.textAlignState = 'right';\n } else {\n this.textAlignState = 'left';\n }\n // To enable body cells text align per rules set in head cell\n this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n sortButtonClick = (key) => {\n // Toggling direction of sorting as we only use one button for sorting\n if (this.sortingDirection !== 'asc') {\n this.sortingDirection = 'asc';\n } else {\n this.sortingDirection = 'desc';\n }\n // Setting to true we can set enable CSS class for \"active\" state of column\n this.sortedByMyKey = true;\n // Use array to send both key and sorting direction\n this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);\n };\n\n headerCellContent = () => {\n if (this.sortable && !this.disableSortingBtn) {\n return (\n <button\n class=\"sdds-table__header-button\"\n onClick={() => this.sortButtonClick(this.columnKey)}\n >\n <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </span>\n\n {this.sortingDirection === '' && (\n <svg\n class=\"sdds-table__header-button-icon\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 15\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n />\n </svg>\n )}\n {/* First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n {this.sortingDirection !== '' && (\n <svg\n class={`sdds-table__header-button-icon ${\n this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n }`}\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n />\n </svg>\n )}\n </button>\n );\n }\n return (\n <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </p>\n );\n };\n\n onHeadCellHover = (key) => {\n this.internalSddsHover.emit([this.tableId, key]);\n };\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__header-cell': true,\n 'sdds-table__header-cell--sortable': this.sortable,\n 'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n 'sdds-table__header-cell--custom-width': this.customWidth !== '',\n 'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--extra-column': this.enableMultiselect || this.enableExpandableRows,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n style={{ width: this.customWidth }}\n // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n onMouseLeave={() => this.onHeadCellHover('')}\n >\n {this.headerCellContent()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-icon.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"sdds-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-inline-tabs-button.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-interface SddsInlineTabsButton extends Components.SddsInlineTabsButton, HTMLElement {}
-export const SddsInlineTabsButton: {
-  prototype: SddsInlineTabsButton;
-  new (): SddsInlineTabsButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-inline-tabs-button.js DELETED Viewed

@@ -1,41 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const sddsInlineTabsButtonCss = ":host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host button{all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-tab-color);padding:8px 4px;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0}:host button .label{margin:12px 0}:host button:hover{cursor:pointer}:host button:hover::after{width:100%}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button::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-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host button.selected{color:var(--sdds-inline-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host button.disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsInlineTabsButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get style() { return sddsInlineTabsButtonCss; }
-}, [1, "sdds-inline-tabs-button", {
-    "disabled": [4],
-    "selected": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tabs-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tabs-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsInlineTabsButton$1);
-      }
-      break;
-  } });
-}
-const SddsInlineTabsButton = SddsInlineTabsButton$1;
-const defineCustomElement = defineCustomElement$1;
-export { SddsInlineTabsButton, defineCustomElement };
-//# sourceMappingURL=sdds-inline-tabs-button.js.map

package/dist/components/sdds-inline-tabs-button.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-inline-tabs-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,8wCAA8wC;;MCOjyCA,sBAAoB;;;;;oBAEH,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UACzC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsInlineTabsButton"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.scss?tag=sdds-inline-tabs-button&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n position: relative;\n z-index: z(tab);\n\n button {\n all: unset;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-inline-tabs-tab-color);\n padding: 8px 4px;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out 0s;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n\n .label {\n margin: 12px 0;\n }\n\n &:hover {\n cursor: pointer;\n\n &::after {\n width: 100%;\n }\n }\n\n &:focus-visible {\n .label {\n @include sdds-focus-state;\n }\n }\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-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out 0s;\n z-index: 1;\n }\n\n &.selected {\n color: var(--sdds-inline-tabs-tab-color-selected);\n\n &::after {\n width: 100%;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n }\n }\n\n &.disabled {\n color: var(--sdds-inline-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n }\n }\n }\n}\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tabs-button',\n styleUrl: 'sdds-inline-tabs-button.scss',\n shadow: true,\n})\nexport class SddsInlineTabsButton {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host role=\"listitem\">\n <button\n class={`${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}`}\n disabled={this.disabled}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-inline-tabs-link.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-interface SddsInlineTabsLink extends Components.SddsInlineTabsLink, HTMLElement {}
-export const SddsInlineTabsLink: {
-  prototype: SddsInlineTabsLink;
-  new (): SddsInlineTabsLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-inline-tabs-link.js DELETED Viewed

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const sddsInlineTabsLinkCss = ":host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-tab-color);padding:8px 4px;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0}:host a .label{margin:12px 0}:host a:hover{cursor:pointer}:host a:hover::after{width:100%}:host a:focus-visible{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a::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-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host a.selected{color:var(--sdds-inline-tabs-tab-color-selected)}:host a.selected .label{opacity:var(--sdds-inline-tab-color-opacity-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host a.disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsInlineTabsLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `
-        ${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get style() { return sddsInlineTabsLinkCss; }
-}, [1, "sdds-inline-tabs-link", {
-    "disabled": [4],
-    "selected": [4],
-    "href": [1],
-    "target": [1],
-    "rel": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tabs-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tabs-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsInlineTabsLink$1);
-      }
-      break;
-  } });
-}
-const SddsInlineTabsLink = SddsInlineTabsLink$1;
-const defineCustomElement = defineCustomElement$1;
-export { SddsInlineTabsLink, defineCustomElement };
-//# sourceMappingURL=sdds-inline-tabs-link.js.map

package/dist/components/sdds-inline-tabs-link.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-inline-tabs-link.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,yxCAAyxC;;MCO1yCA,oBAAkB;;;;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsInlineTabsLink"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.scss?tag=sdds-inline-tabs-link&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n position: relative;\n z-index: z(tab);\n\n a {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-inline-tabs-tab-color);\n padding: 8px 4px;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out 0s;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n \n .label {\n margin: 12px 0;\n }\n\n &:hover {\n cursor: pointer;\n\n &::after {\n width: 100%;\n }\n }\n\n &:focus-visible {\n @include sdds-focus-state;\n }\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-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out 0s;\n z-index: 1;\n }\n\n &.selected {\n color: var(--sdds-inline-tabs-tab-color-selected);\n\n .label {\n opacity: var(--sdds-inline-tab-color-opacity-selected);\n }\n\n &::after {\n width: 100%;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n }\n }\n\n &.disabled {\n color: var(--sdds-inline-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n }\n }\n }\n}\n\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tabs-link',\n styleUrl: 'sdds-inline-tabs-link.scss',\n shadow: true,\n})\nexport class SddsInlineTabsLink {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n /** Href for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n render() {\n return (\n <Host role=\"listitem\">\n <a\n class={`\n ${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}\n `}\n href={this.href}\n target={this.target}\n rel={this.rel}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-inline-tabs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-inline-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n display: flex;\n background-color: var(--sdds-inline-tabs-background);\n position: relative;\n\n &::after {\n content: ' ';\n display: block;\n border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n opacity: var(--sdds-inline-tabs-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 white-space: nowrap;\n width: 100%;\n overflow-x: scroll;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .scroll-right-button {\n right: 0;\n z-index: calc(z(tab) + 1);\n }\n\n .scroll-left-button {\n left: 0;\n z-index: calc(z(tab) + 1);\n }\n\n .scroll-right-button,\n .scroll-left-button {\n color: var(--sdds-folder-tabs-scroll-btn-color);\n cursor: pointer;\n border: 0;\n width: 0;\n background-color: var(--sdds-inline-tabs-scroll-btn-background);\n display: none;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n position: sticky;\n\n &.show {\n min-width: 48px;\n display: block;\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n svg {\n fill: var(--sdds-folder-tabs-scroll-btn-color);\n }\n }\n}\n","import { Component, Host, State, Element, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, Watch } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-inline-tabs',\n styleUrl: 'inline-tabs.scss',\n shadow: true,\n})\nexport class InlineTabsFullbleed {\n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n @Element() host: HostElement;\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n\n @State() selectedTab: {\n tab: string;\n tabIndex: number;\n };\n\n @State() buttonWidth: number = 0; // current calculated width of the largest nav button\n\n private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n private componentWidth: number = 0; // visible width of this component\n\n private buttonsWidth: number = 0; // total width of all nav items combined\n\n private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n private children: Array<HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement>;\n\n /** Selects a tab based on tabindex, will not select a disabled tab. */\n @Method()\n async selectTab(tabIndex: number) {\n if (!this.children[tabIndex].disabled) {\n this.children.forEach((element) => element.removeAttribute('selected'));\n this.children = this.children.map((element, index) => {\n if (index === tabIndex) {\n element.setAttribute('selected', '');\n this.selectedTab = {\n tab: element.innerText,\n tabIndex: index,\n };\n }\n return element;\n });\n }\n return {\n selectedTab: this.selectedTab.tab,\n selectedTabIndex: this.selectedTab.tabIndex,\n };\n }\n\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n selectedTab: {\n tab: string;\n tabIndex: number;\n };\n }>;\n\n @Watch('selectedTab')\n handleSelectedTabChange() {\n this.host.setAttribute('selected-tab', this.selectedTab.tab);\n this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);\n this.sddsChange.emit({\n selectedTab: this.selectedTab,\n });\n }\n\n connectedCallback() {\n this.children = Array.from(this.host.children) as Array<\n HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n >;\n this.children = this.children.map((item, index) => {\n item.addEventListener('click', () => {\n if (!item.disabled) {\n this.children.forEach((element) => element.removeAttribute('selected'));\n item.setAttribute('selected', '');\n this.selectedTab = {\n tab: item.innerText,\n tabIndex: index,\n };\n }\n });\n if (item.selected) {\n this.selectedTab = {\n tab: item.innerText,\n tabIndex: index,\n };\n }\n return item;\n });\n this.children[0].classList.add('first');\n this.children[this.children.length - 1].classList.add('last');\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\n componentWillRender() {\n if (!this.selectedTab) {\n this.children = Array.from(this.host.children) as Array<\n HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n >;\n this.children = this.children.map((item, index) => {\n if (item.selected) {\n this.selectedTab = {\n tab: item.innerText,\n tabIndex: index,\n };\n }\n return item;\n });\n }\n }\n\n componentDidRender() {\n if (this.buttonsWidth > this.componentWidth) {\n this.evaluateScrollButtons();\n } else {\n this.showLeftScroll = false;\n this.showRightScroll = false;\n }\n this.addResizeObserver();\n }\n\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + 95;\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - 10;\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 addResizeObserver = () => {\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\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\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <div\n role=\"list\"\n class=\"wrapper\"\n ref={(el) => {\n this.navWrapperElement = el as HTMLElement;\n }}\n >\n <button\n class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n onClick={() => this.scrollLeft()}\n disabled={!this.showLeftScroll}\n >\n <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n </button>\n <slot />\n <button\n class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n onClick={() => this.scrollRight()}\n disabled={!this.showRightScroll}\n >\n <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-link.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-link.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpBA,UAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsLink"],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n cursor: pointer;\n outline: none;\n color: var(--sdds-link);\n\n &:active {\n color: var(--sdds-link);\n text-decoration: underline;\n text-decoration-color: var(--sdds-link);\n }\n\n &:hover {\n color: var(--sdds-link-hover);\n text-decoration: underline;\n text-decoration-color: var(--sdds-link-hover);\n }\n\n &:visited {\n color: var(--sdds-link-visited);\n text-decoration-color: var(--sdds-link-visited);\n }\n\n &:focus {\n color: var(--sdds-link-focus);\n text-decoration: none;\n outline: 2px solid var(--sdds-link-focus);\n outline-offset: -2px;\n }\n\n &.disabled {\n color: var(--sdds-link-disabled);\n text-decoration-color: var(--sdds-link-disabled);\n pointer-events: none;\n }\n\n &.no-underline {\n text-decoration: none;\n\n &:hover {\n text-decoration: none;\n }\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-link',\n styleUrl: 'sdds-link.scss',\n shadow: false,\n})\nexport class SddsLink {\n /** URL for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** Disables the link */\n @Prop() disabled: boolean = false;\n\n /** Displays the link with an underline. */\n @Prop() underline: boolean = true;\n\n /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n render() {\n return (\n <a\n class={`\n ${this.disabled ? 'disabled' : ''}\n ${this.underline ? '' : 'no-underline'}\n \n `}\n href={this.href}\n target={this.target}\n rel={this.rel}\n >\n <slot></slot>\n </a>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-message.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-message.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ooDAAooD;;MCO9oDA,aAAW;;;;;IAgBtB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;;uBAxB6C,IAAI;gBAGa,aAAa;kBAGnD,KAAK;mBAGJ,KAAK;;EAiBhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;0BACS,IAAI,CAAC,IAAI;UACzB,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,EAAE;UACrC,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAExE,CAAC,IAAI,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC9E,WAAK,KAAK,EAAE,iBAAiB,IAC1B,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAO,EAC9D,CAAC,IAAI,CAAC,OAAO,KACZ,WAAK,KAAK,EAAC,0BAA0B,IACnC,eAAa,CACT,CACP,CACG,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsMessage"],"sources":["./src/components/message/sdds-message.scss?tag=sdds-message&encapsulation=shadow","./src/components/message/sdds-message.tsx"],"sourcesContent":[":host {\n .message-wrapper {\n display: flex;\n padding: 16px;\n background-color: var(--sdds-message-background);\n border-radius: 4px;\n\n &.information {\n border-left: 4px solid var(--sdds-information);\n\n sdds-icon {\n color: var(--sdds-information);\n }\n }\n\n &.success {\n border-left: 4px solid var(--sdds-positive);\n\n sdds-icon {\n color: var(--sdds-positive);\n }\n }\n\n &.error {\n background-color: var(--sdds-message-type-error-background);\n border-left: 4px solid var(--sdds-negative);\n\n sdds-icon {\n color: var(--sdds-negative);\n }\n }\n\n &.warning {\n border-left: 4px solid var(--sdds-warning);\n\n sdds-icon {\n color: var(--sdds-warning);\n }\n }\n\n &.message-minimal {\n border: none;\n display: flex;\n align-items: center;\n padding: 0;\n background-color: transparent;\n\n .message-header {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n\n sdds-icon {\n padding-right: 8px;\n }\n }\n }\n\n sdds-icon {\n padding-right: 16px;\n }\n\n .message-content {\n display: flex;\n flex-direction: column;\n gap: 4px;\n color: var(--sdds-message-color);\n padding: 2px 0;\n\n .message-header {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n }\n\n .message-extended-message {\n color: var(--sdds-message-color);\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n }\n\n .sdds-mode-variant-primary {\n --sdds-message-background: var(--sdds-message-background-primary);\n }\n\n .sdds-mode-variant-secondary {\n --sdds-message-background: var(--sdds-message-background-secondary);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-message',\n styleUrl: 'sdds-message.scss',\n shadow: true,\n})\nexport class SddsMessage {\n /** Header text for the component. */\n @Prop() header: string;\n\n /** Variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** Type of message. */\n @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n /** Removes the icon in the message. */\n @Prop() noIcon: boolean = false;\n\n /** Minimal message styling. */\n @Prop() minimal: boolean = false;\n\n getIconName = () => {\n switch (this.type) {\n case 'information':\n return 'info';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'success':\n return 'tick';\n default:\n return 'info';\n }\n };\n\n render() {\n return (\n <Host>\n <div\n class={`\n message-wrapper ${this.type}\n ${this.minimal ? 'message-minimal' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n {!this.noIcon && <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>}\n <div class={`message-content`}>\n {this.header && <div class=\"message-header\">{this.header}</div>}\n {!this.minimal && (\n <div class=\"message-extended-message\">\n <slot></slot>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-modal.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-modal.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n $screen-s: (\n xs: 100%,\n sm: 100%,\n md: 100%,\n lg: 100%,\n ),\n $screen-md: (\n xs: 75%,\n sm: 62.5%,\n md: 75%,\n lg: 100%,\n ),\n $screen-l: (\n xs: 31.25%,\n sm: 43.75%,\n md: 62.5%,\n lg: 75%,\n ),\n $screen-xl: (\n xs: 31.25%,\n sm: 37.5%,\n md: 62.5%,\n lg: 75%,\n ),\n $screen-xxl: (\n xs: 25%,\n sm: 37.5%,\n md: 50%,\n lg: 75%,\n ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n /* SCROLL STUFF */\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n background-color: var(--sdds-grey-300);\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background-color: var(--sdds-grey-300);\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background-color: var(--sdds-grey-500);\n }\n}\n\n@mixin modal-scroll-outer {\n /* SCROLL STUFF */\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n background-color: var(--sdds-grey-300);\n border-radius: 0 1em 1em 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background-color: var(--sdds-grey-300);\n border-radius: 0 1em 1em 0;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background-color: var(--sdds-grey-500);\n border-radius: 0 1em 1em 0;\n }\n}\n\n@mixin modal-host {\n left: 0;\n top: 0;\n position: fixed;\n height: 100%;\n width: 100%;\n z-index: z(modal);\n background-color: var(--sdds-modal-backdrop);\n padding: 0 16px;\n\n @media (max-width: $screen-s) {\n padding: 0;\n }\n\n &.show {\n display: flex;\n }\n\n &.hide {\n display: none;\n }\n}\n\n@mixin modal-header {\n display: flex;\n padding-bottom: var(--sdds-spacing-element-8);\n position: sticky;\n top: 0;\n background-color: var(--sdds-modal-background);\n z-index: 1;\n\n &::before {\n content: ' ';\n position: absolute;\n height: 16px;\n top: -16px;\n width: 100%;\n background-color: var(--sdds-modal-background);\n }\n}\n\n@mixin modal-headline {\n color: var(--sdds-modal-text);\n font: var(--sdds-headline-05);\n letter-spacing: var(--sdds-headline-05-ls);\n margin: 0;\n flex: 1;\n}\n\n@mixin modal-body {\n color: var(--sdds-modal-text);\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n padding-bottom: 40px;\n overflow-y: visible;\n padding-right: 16px;\n @include modal-scroll-inner;\n\n @media (min-width: $screen-l) {\n padding-right: 64px;\n }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n @include sdds-box-sizing;\n\n background-color: var(--sdds-modal-background);\n margin: auto;\n position: relative;\n border-radius: 4px;\n padding: 16px;\n max-height: 85vh;\n overflow-y: auto;\n\n @include modal-scroll-outer;\n\n &__actions-sticky {\n overflow: hidden;\n\n .sdds-modal-body {\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n padding-bottom: 96px;\n margin: 0 -16px 0 0;\n max-height: calc(85vh - 36px);\n overflow-y: auto;\n }\n\n .sdds-modal-actions {\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n background-color: var(--sdds-modal-background);\n padding: var(--sdds-spacing-element-16);\n display: flex;\n gap: 16px;\n }\n }\n\n &__actions-static {\n .sdds-modal-actions {\n background-color: var(--sdds-modal-background);\n display: flex;\n gap: 16px;\n }\n }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n @media (min-width: $screen) {\n @each $modal, $value in $modals {\n .sdds-modal-#{$modal} {\n width: $value;\n }\n }\n }\n}\n\n@media (max-width: $screen-s) {\n .sdds-modal-md,\n .sdds-modal-lg,\n .sdds-modal-sm {\n height: 100%;\n\n slot[name='sdds-modal-actions']::slotted(*) {\n display: flex;\n }\n }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n @include modal-header;\n}\n\n.sdds-modal-headline {\n @include modal-headline;\n\n color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n @include modal-body;\n}\n\n.sdds-modal-backdrop {\n @include sdds-box-sizing;\n @include modal-host;\n}\n\nbutton.sdds-modal-close {\n background-color: transparent;\n border: 0;\n padding: 0;\n appearance: unset;\n}\n\n.sdds-modal-close {\n display: inline-block;\n height: auto;\n color: var(--sdds-modal-icon);\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n\n @media (min-width: $screen-s) {\n margin-left: var(--sdds-spacing-element-16);\n }\n\n @media (min-width: $screen-l) {\n margin-left: var(--sdds-spacing-element-48);\n }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n display: inline-block;\n height: auto;\n background-repeat: no-repeat;\n cursor: pointer;\n\n @media (min-width: $screen-s) {\n margin-left: var(--sdds-spacing-element-16);\n }\n\n @media (min-width: $screen-l) {\n margin-left: var(--sdds-spacing-element-48);\n }\n\n svg {\n fill: var(--sdds-modal-icon);\n }\n}\n\n.sdds-modal-overflow {\n overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n @include modal-host;\n\n .sdds-modal-close {\n border: none;\n background-color: transparent;\n }\n\n .sdds-modal-close-btn {\n border: none;\n background-color: transparent;\n }\n}\n\n:host(.show) {\n display: flex;\n}\n\n:host(.hide) {\n display: none;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n Element,\n Method,\n State,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n @Element() host: HTMLElement;\n\n /** Disables closing modal on clicking on overlay area. */\n @Prop() prevent: boolean = false;\n\n /** Size of modal */\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n /** Sticky or Static Actions */\n @Prop() actions: 'sticky' | 'static' = 'static';\n\n /** CSS selector for the element that will show the modal. */\n @Prop() selector: string;\n\n /** Element that will show the modal (takes priority over selector) */\n @Prop() referenceEl: HTMLElement;\n\n /** Controls whether the modal is shown or not. If this is set hiding and showing\n * will be decided by this prop and will need to be controlled from the outside. */\n @Prop() show: boolean;\n\n // State that keeps track of show/closed state for the modal.\n @State() isShown: boolean = false;\n\n /** Shows the modal. */\n @Method()\n async showModal() {\n this.handleShow();\n }\n\n /** Closes the modal. */\n @Method()\n async closeModal() {\n this.handleClose();\n }\n\n /** Emitts when the modal is closed. */\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<any>;\n\n connectedCallback() {\n if (this.show !== null) {\n this.isShown = this.show;\n }\n this.setDissmissButtons();\n this.setShowButton();\n }\n\n /** Emits a close event and then close the modal if it is not prevented. */\n handleClose = (event?) => {\n const closeEvent = this.sddsClose.emit(event);\n if (!closeEvent.defaultPrevented) {\n this.isShown = false;\n }\n };\n\n handleShow = () => {\n this.isShown = true;\n };\n\n /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n handleOverlayClick(event) {\n const targetList = event.composedPath();\n const target = targetList[0];\n if (\n target.classList[0] === 'sdds-modal-close' ||\n (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n ) {\n this.handleClose(event);\n }\n }\n\n /** Adds an event listener to the reference element that shows/closes the modal. */\n initializeReferenceElement = (referenceEl) => {\n if (referenceEl) {\n referenceEl.addEventListener('click', (event) => {\n event.stopPropagation();\n if (this.isShown) {\n this.handleClose(event);\n } else {\n this.handleShow();\n }\n });\n }\n };\n\n /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n setShowButton = () => {\n if (this.selector || this.referenceEl) {\n const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n if (referenceEl) {\n this.initializeReferenceElement(referenceEl);\n }\n }\n };\n\n /** Adds an event listener to the dismiss buttons that closes the modal. */\n setDissmissButtons() {\n this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n dismissButton.addEventListener('click', (event) => {\n this.handleClose(event);\n });\n });\n }\n\n render() {\n return (\n <Host\n onClick={(event) => {\n this.handleOverlayClick(event);\n }}\n class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n >\n <div\n class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n this.size ? `sdds-modal-${this.size}` : ''\n } `}\n >\n <div class=\"sdds-modal-header\">\n <slot name=\"sdds-modal-headline\"></slot>\n <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n\n <div class=\"sdds-modal-body\">\n <slot name=\"sdds-modal-body\"></slot>\n </div>\n\n <div class=\"sdds-modal-actions\">\n <slot name=\"sdds-modal-actions\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-navigation-tabs-button.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-interface SddsNavigationTabsButton extends Components.SddsNavigationTabsButton, HTMLElement {}
-export const SddsNavigationTabsButton: {
-  prototype: SddsNavigationTabsButton;
-  new (): SddsNavigationTabsButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-navigation-tabs-button.js DELETED Viewed

@@ -1,41 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const sddsNavigationTabsButtonCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host button{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host button.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host button .label{padding:8px 4px}:host button:focus-visible{outline:none}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host button:hover::after{width:100%}:host button.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host button::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsNavigationTabsButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get style() { return sddsNavigationTabsButtonCss; }
-}, [1, "sdds-navigation-tabs-button", {
-    "disabled": [4],
-    "selected": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTabsButton$1);
-      }
-      break;
-  } });
-}
-const SddsNavigationTabsButton = SddsNavigationTabsButton$1;
-const defineCustomElement = defineCustomElement$1;
-export { SddsNavigationTabsButton, defineCustomElement };
-//# sourceMappingURL=sdds-navigation-tabs-button.js.map

package/dist/components/sdds-navigation-tabs-button.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-navigation-tabs-button.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,+zCAA+zC;;MCOt1CA,0BAAwB;;;;;oBAEP,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;WACxC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsNavigationTabsButton"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.scss?tag=sdds-navigation-tabs-button&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n button {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-navigation-tabs-tab-color);\n padding: 18px 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 background-color: transparent;\n border: 0;\n\n &.selected {\n color: var(--sdds-navigation-tabs-tab-color-selected);\n\n &::after {\n width: 100%;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n }\n }\n\n .label {\n padding: 8px 4px;\n }\n\n &:focus-visible {\n outline: none;\n\n .label {\n @include sdds-focus-state;\n }\n }\n\n &:hover {\n color: var(--sdds-navigation-tabs-tab-color-hover);\n opacity: 1;\n\n &::after {\n width: 100%;\n }\n }\n\n &.disabled {\n color: var(--sdds-navigation-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n }\n }\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-navigation-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n}\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-navigation-tabs-button',\n styleUrl: 'sdds-navigation-tabs-button.scss',\n shadow: true,\n})\nexport class SddsNavigationTabsButton {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host role=\"listitem\">\n <button\n class={`${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}`}\n disabled={this.disabled}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-navigation-tabs-link.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-interface SddsNavigationTabsLink extends Components.SddsNavigationTabsLink, HTMLElement {}
-export const SddsNavigationTabsLink: {
-  prototype: SddsNavigationTabsLink;
-  new (): SddsNavigationTabsLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-navigation-tabs-link.js DELETED Viewed

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const sddsNavigationTabsLinkCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host a.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host a .label{padding:8px 4px}:host a:focus-visible{outline:none}:host a:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host a:hover::after{width:100%}:host a.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host a::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsNavigationTabsLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `
-        ${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get style() { return sddsNavigationTabsLinkCss; }
-}, [1, "sdds-navigation-tabs-link", {
-    "disabled": [4],
-    "selected": [4],
-    "href": [1],
-    "target": [1],
-    "rel": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTabsLink$1);
-      }
-      break;
-  } });
-}
-const SddsNavigationTabsLink = SddsNavigationTabsLink$1;
-const defineCustomElement = defineCustomElement$1;
-export { SddsNavigationTabsLink, defineCustomElement };
-//# sourceMappingURL=sdds-navigation-tabs-link.js.map

package/dist/components/sdds-navigation-tabs-link.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-navigation-tabs-link.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,wwCAAwwC;;MCO7xCA,wBAAsB;;;;;oBAEL,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsNavigationTabsLink"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.scss?tag=sdds-navigation-tabs-link&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n a {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-navigation-tabs-tab-color);\n padding: 18px 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 background-color: transparent;\n border: 0;\n\n &.selected {\n color: var(--sdds-navigation-tabs-tab-color-selected);\n\n &::after {\n width: 100%;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n }\n }\n\n .label {\n padding: 8px 4px;\n }\n\n &:focus-visible {\n outline: none;\n\n .label {\n @include sdds-focus-state;\n }\n }\n\n &:hover {\n color: var(--sdds-navigation-tabs-tab-color-hover);\n opacity: 1;\n\n &::after {\n width: 100%;\n }\n }\n\n &.disabled {\n color: var(--sdds-navigation-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n }\n }\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-navigation-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n}\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-navigation-tabs-link',\n styleUrl: 'sdds-navigation-tabs-link.scss',\n shadow: true,\n})\nexport class SddsNavigationTabsLink {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n /** Href for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n render() {\n return (\n <Host role=\"listitem\">\n <a\n class={`\n ${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}\n `}\n href={this.href}\n target={this.target}\n rel={this.rel}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-navigation-tabs.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-navigation-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n display: flex;\n background-color: var(--sdds-inline-tabs-background);\n position: relative;\n\n &::after {\n content: ' ';\n display: block;\n border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n opacity: var(--sdds-inline-tabs-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 white-space: nowrap;\n width: 100%;\n overflow-x: scroll;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .scroll-right-button {\n right: 0;\n z-index: calc(z(tab) + 1);\n }\n\n .scroll-left-button {\n left: 0;\n z-index: calc(z(tab) + 1);\n }\n\n .scroll-right-button,\n .scroll-left-button {\n color: var(--sdds-folder-tabs-scroll-btn-color);\n cursor: pointer;\n border: 0;\n width: 0;\n background-color: var(--sdds-inline-tabs-scroll-btn-background);\n display: none;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n position: sticky;\n\n &.show {\n min-width: 48px;\n display: block;\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n svg {\n fill: var(--sdds-folder-tabs-scroll-btn-color);\n }\n }\n}\n","import {\n Component,\n Host,\n State,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-navigation-tabs',\n styleUrl: 'navigation-tabs.scss',\n shadow: true,\n})\nexport class NavigationTabs {\n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n @Element() host: HTMLElement;\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n\n @State() selectedTab: {\n tab: string;\n tabIndex: number;\n };\n\n private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n private componentWidth: number = 0; // visible width of this component\n\n private buttonsWidth: number = 0; // total width of all nav items combined\n\n private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n private children: Array<HTMLSddsNavigationTabsLinkElement | HTMLSddsNavigationTabsButtonElement>;\n\n /** Selects a tab based on tabindex, will not select a disabled tab. */\n @Method()\n async selectTab(tabIndex: number) {\n if (!this.children[tabIndex].disabled) {\n this.children.forEach((element) => element.removeAttribute('selected'));\n this.children = this.children.map((element, index) => {\n if (index === tabIndex) {\n element.setAttribute('selected', '');\n this.selectedTab = {\n tab: element.innerText,\n tabIndex: index,\n };\n }\n return element;\n });\n }\n return {\n selectedTab: this.selectedTab.tab,\n selectedTabIndex: this.selectedTab.tabIndex,\n };\n }\n\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n selectedTab: {\n tab: string;\n tabIndex: number;\n };\n }>;\n\n @Watch('selectedTab')\n handleSelectedTabChange() {\n this.host.setAttribute('selected-tab', this.selectedTab.tab);\n this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);\n this.sddsChange.emit({\n selectedTab: this.selectedTab,\n });\n }\n\n connectedCallback() {\n this.children = Array.from(this.host.children) as Array<\n HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n >;\n this.children = this.children.map((item, index) => {\n item.addEventListener('click', () => {\n if (!item.disabled) {\n this.children.forEach((element) => element.removeAttribute('selected'));\n item.setAttribute('selected', '');\n this.selectedTab = {\n tab: item.innerText,\n tabIndex: index,\n };\n }\n });\n if (index === 0) {\n item.classList.add('first');\n }\n if (index === this.children.length - 1) {\n item.classList.add('last');\n }\n if (item.selected) {\n this.selectedTab = {\n tab: item.innerText,\n tabIndex: index,\n };\n }\n return item;\n });\n\n this.children = Array.from(this.host.children) as Array<\n HTMLSddsNavigationTabsLinkElement | HTMLSddsNavigationTabsButtonElement\n >;\n this.children[0].classList.add('first');\n this.children[this.children.length - 1].classList.add('last');\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-navigation-tabs-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\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\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 ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <div\n role=\"list\"\n class=\"wrapper\"\n ref={(el) => {\n this.navWrapperElement = el as HTMLElement;\n }}\n >\n <button\n class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n onClick={() => this.scrollLeft()}\n disabled={!this.showLeftScroll}\n >\n <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n </button>\n <slot />\n <button\n class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n onClick={() => this.scrollRight()}\n disabled={!this.showRightScroll}\n >\n <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-popover-canvas.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-popover-canvas.js","mappings":"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","names":[],"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 color: var(--sdds-popover-canvas-color);\n background-color: var(--sdds-popover-canvas-background);\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 display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State, Watch } 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() host!: HTMLSddsPopoverCanvasElement;\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 /** Controls wether the popover is shown or not. If this is set hiding and showing\n * will be decided by this prop and will need to be controlled from the outside.\n */\n @Prop() show: boolean = null;\n\n /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\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 /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n @Prop() modifiers: Object[] = [];\n\n @State() renderedShowValue: boolean = false;\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n @State() isShown: boolean = false;\n\n @Watch('show')\n onShowChange(newValue: boolean) {\n this.isShown = newValue;\n }\n\n @Watch('referenceEl')\n onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n if (newValue !== oldValue) {\n this.popperInstance?.destroy();\n\n if (newValue) {\n this.initialize(newValue);\n }\n }\n }\n\n @Listen('click', { target: 'window' })\n onAnyClick(event: MouseEvent) {\n if (this.isShown && this.show === null) {\n // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n const isClickOutside = !event.composedPath().includes(this.host as any);\n if (isClickOutside) {\n this.isShown = false;\n }\n }\n }\n\n initialize = (referenceEl) => {\n this.popperInstance = createPopper(referenceEl, this.host, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ...this.modifiers,\n ],\n });\n\n if (this.show === null) {\n referenceEl.addEventListener('click', (event) => {\n event.stopPropagation();\n if (this.isShown) {\n this.isShown = false;\n } else {\n this.isShown = true;\n }\n });\n }\n };\n\n connectedCallback() {\n if (this.show !== null) {\n this.isShown = this.show;\n }\n }\n\n componentDidLoad() {\n if (this.selector || this.referenceEl) {\n const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n if (referenceEl) {\n this.initialize(referenceEl);\n } else {\n console.error(\n `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n );\n }\n }\n }\n\n componentDidRender() {\n if (this.isShown && !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.isShown;\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n render() {\n return (\n <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-popover-menu.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-popover-menu.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,oUAAoU;;MCS9U,WAAW;;;;;oBAIK,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE;MACvE,QAAQ,EAAE,OAAO;MACjB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG;MACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB,CAAC;IAEF,MAAM,QAAQ,GAAG;MACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,QAAQ,EAAE,CAAC;OACZ;WAAM;QACL,QAAQ,EAAE,CAAC;OACZ;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;MAGxC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;GACpC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI,GAAG,wBAAwB,GAAG,EAAE,EAAE,IAC3E,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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"],"version":3}

package/dist/components/sdds-radio-button.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;;;mBAgBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;;;;MAI1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACnB,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;OACJ,GACD,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n @include sdds-box-sizing;\n\n display: flex;\n align-items: center;\n margin-left: -4px;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-radio-button-color);\n\n .sdds-form-input[type='radio'] {\n appearance: none;\n outline: none;\n margin: 0;\n border: 0;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n position: relative;\n cursor: pointer;\n\n + label {\n padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n var(--sdds-spacing-element-4);\n cursor: pointer;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n border-radius: 50%;\n box-sizing: border-box;\n }\n\n &::before {\n width: 24px;\n height: 24px;\n left: 0;\n top: 0;\n }\n\n &::after {\n border: 1px solid var(--sdds-radio-button-interaction-01);\n background-color: var(--sdds-radio-button-interaction-02);\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-radio-button-background-hover);\n opacity: 0.12;\n }\n }\n\n &:focus {\n &::before {\n background-color: var(--sdds-radio-button-background-focus);\n opacity: 0.24;\n animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n }\n }\n\n &:disabled,\n &.disabled {\n cursor: not-allowed;\n\n &::after {\n border-color: var(--sdds-radio-button-border-color-disabled-after);\n background-color: var(--sdds-radio-button-interaction-02);\n }\n\n + label {\n color: var(--sdds-radio-button-disabled);\n cursor: not-allowed;\n }\n\n &:hover {\n &::before {\n display: none;\n opacity: 1;\n }\n }\n }\n }\n\n .sdds-form-input[type='radio']:checked {\n &::after {\n border: 4px solid var(--sdds-radio-button-interaction-01);\n }\n\n &:disabled,\n &.disabled {\n &:hover::before,\n &::before {\n display: block;\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border: 1px solid var(--sdds-radio-button-color-disabled-before);\n box-sizing: content-box;\n }\n\n &::after {\n border: 4px solid var(--sdds-radio-button-interaction-02);\n background-color: var(--sdds-radio-button-color-disabled-after);\n left: calc(4px + 1px);\n top: calc(4px + 1px);\n }\n }\n }\n\n @keyframes rb-focus {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.24;\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-radio-button',\n styleUrl: 'radio-button-component.scss',\n shadow: false,\n scoped: true,\n})\nexport class RadioButton {\n /** Name of radio button, used for reference. */\n @Prop() name: string;\n\n /** Value of input. */\n @Prop() value: string;\n\n /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n /** Label mainly used for accesibility tools. */\n // @Prop() ariaLabelledBy: string;\n\n /** Label mainly used for accesibility tools. */\n // @Prop() ariaDescribedBy: string;\n\n /** Unique radio button identifier. */\n @Prop() radioId: string = crypto.randomUUID();\n\n /** Decides if the radio button is checked or not. */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** Decides if the radio button is required or not. */\n @Prop() required: boolean = false;\n\n /** Decides if the radio button is disabled or not. */\n @Prop() disabled: boolean = false;\n\n @Element() host: HostElement;\n\n /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n radioId: string;\n value: string;\n }>;\n\n render() {\n return (\n <div class=\"sdds-radio-button\">\n <input\n class=\"sdds-form-input\"\n type=\"radio\"\n name={this.name}\n id={this.radioId}\n value={this.value}\n checked={this.checked}\n aria-checked={this.checked}\n // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n // aria-labelledby={this.ariaLabelledBy}\n // aria-describedby={this.host.getAttribute('aria-describedby')}\n required={this.required}\n disabled={this.disabled}\n onChange={() => {\n this.sddsChange.emit({\n radioId: this.radioId,\n value: this.value,\n });\n }}\n />\n <label htmlFor={this.radioId}>\n <slot name=\"label\"></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}