@scania/tegel 1.4.0 → 1.5.0

package/dist/collection/stories/patterns/navigation/navigation-user-menu.stories.js

@@ -1,140 +0,0 @@
-import formatHtmlPreview from "../../formatHtmlPreview";
-import readme from "./readme.md";
-export default {
-    title: 'Patterns/Navigation',
-    parameters: {
-        notes: {
-            Readme: readme,
-        },
-        layout: 'fullscreen',
-        docs: {
-            source: {
-                state: 'closed',
-            },
-        },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        siteName: {
-            name: 'Site name',
-            description: 'Set a custom title for the Header.',
-            control: {
-                type: 'text',
-            },
-        },
-    },
-    args: {
-        siteName: 'Application',
-    },
-};
-const Template = () => formatHtmlPreview(`
-    <script>
-      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
-      window.demoSideMenu = document.querySelector('#demo-side-menu');
-      window.demoHamburger = document.querySelector('#demo-hamburger');
-    </script>
-    <style>
-      /* If an extra button in the Header is required except on 
-      very narrow screens, you can use classes like these: */
-      .demo-hide {
-        display: none;
-      }
-
-      @media (min-width: 992px) {
-        .demo-xs-hide {
-          display: none;
-        }
-        .demo-xs-show {
-          display: block;
-        }
-      }
-    </style>
-
-
-    <div class="demo-layout">
-      <tds-header>
-        <tds-header-hamburger class="demo-xs-hide" onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></tds-header-hamburger>
-
-        <tds-header-title>
-          Example: User menu
-        </tds-header-title>
-
-        <tds-header-launcher slot="end">
-          <tds-header-launcher-list-title>Sustainable tools</tds-header-launcher-list-title>
-          <tds-header-launcher-list>
-            <tds-header-launcher-list-item>
-              <a href="https://tegel.scania.com">Button</a>
-            </tds-header-launcher-list-item>
-            <tds-header-launcher-list-item>
-              <a href="https://tegel.scania.com">Button</a>
-            </tds-header-launcher-list-item>
-          </tds-header-launcher-list>
-        </tds-header-launcher>
-        
-        <tds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon selected>
-          <img slot="icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
-          <tds-header-dropdown-list size="lg">
-            <tds-header-dropdown-list-user
-              header="Name Nameson"
-              subheader="Company name">
-            </tds-header-dropdown-list-user>
-            <tds-header-dropdown-list-item selected>
-              <a href="https://www.scania.com">My Instructions</a>
-            </tds-header-dropdown-list-item>
-            <tds-header-dropdown-list-item>
-              <a href="https://www.scania.com">Task List</a>
-            </tds-header-dropdown-list-item>
-          </tds-header-dropdown-list>
-        </tds-header-dropdown>
-
-        <tds-header-brand-symbol slot="end">
-          <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
-        </tds-header-brand-symbol>
-
-      </tds-header>
-
-      <tds-side-menu id="demo-side-menu" aria-label="Side menu">
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-overlay>
-
-        <tds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-close-button>
-
-        <tds-side-menu-dropdown slot="end" class="demo-xs-hide" selected default-open>
-          <tds-side-menu-user 
-            slot="label" 
-            heading="Name Namesson" 
-            subheading="Company name" 
-            img-src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" 
-            img-alt="">
-          </tds-side-menu-user>
-          <tds-side-menu-dropdown-list type="lg">
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com">My Instructions</a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.scania.com">Task List</a>
-            </tds-side-menu-dropdown-list-item>
-          </tds-side-menu-dropdown-list>
-        </tds-side-menu-dropdown>
-
-
-      </tds-side-menu>
-
-      <main class="demo-main tds-u-p3" style="box-sizing: border-box;">
-        <p>If you display a user menu, a side menu is needed to show it on extra small screens.</p>
-        <br/>
-        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>
-      </main>
-    </div>
-  `);
-export const UserMenu = Template.bind({});

package/dist/collection/stories/tegel.stories.js

@@ -1,283 +0,0 @@
-const meta = {
-    title: 'Intro/Tegel Design System',
-    parameters: {
-        layout: 'fullscreen',
-        options: {
-            showPanel: false,
-            showToolbar: false,
-        },
-    },
-};
-export default meta;
-export const TegelDesignSystem = {
-    render: () => `<style>
-                    article {
-                        box-sizing: border-box;
-                        max-width: 688px;
-                        padding: 32px;
-                        margin: auto;
-                        > * {
-                            margin-bottom: 72px;
-                        }
-                    }
-
-                    section > p,
-                    section > ul,
-                    section > tds-link {
-                        margin-bottom: 32px;
-                    }
-
-                    tds-link {
-                        display: inline-block;
-                    }
-
-                    .mb-72 {
-                        margin-bottom: 72px;
-                    }
-                </style>
-                <article class="tds-body-01">
-                    <section>
-                        <h1 class="tds-headline-02 mb-72">Tegel Design System</h1>
-                        <p class="tds-paragraph-01 mb-72">The design system supports the design and development of digital solutions at
-                            Scania. The purpose is to secure a
-                            coherent, premium brand and user experience across all of Scania's digital touchpoints.
-                        </p>
-
-                        <tds-link>
-                            <a href="https://tegel.scania.com/">
-                                https://tegel.scania.com/
-                            </a>
-                        </tds-link>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb2">Status</h4>
-
-                        <p>
-                            This package is currently in a <b>beta</b> stage. We are now working hard towards a 1.0 release,
-                            but if
-                            you
-                            want to try out the package today you can! It's available via <tds-link><a href="https://www.npmjs.com/package/@scania/tegel">NPM</a></tds-link> and can be installed using the
-                            installation
-                            guide which you can find <tds-link><a target="_self" href="?path=/story/intro-installation--page">here.</a></tds-link>
-                        </p>
-
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb2">@scania/tegel 🧱</h4>
-
-                        <p>
-                            <b>TLDR;</b> The new @scania/tegel package is an improvement and continuation of the previous
-                            @scania/component,
-                            @scania/theme-light, and @scania/icons packages. It simplifies the installation process and ships with types
-                            which offers type safety and improves the developer experience with intellisence and autocompletion.
-                        </p>
-                        <p>
-                            The new
-                            package includes all components as web components, removes the old CSS class components and makes the
-                            installation and updates easier. The current prefix for components, CSS variables, and utility classes -
-                            "sdds",
-                            will be changed. We have also created a new Storybook for @scania/tegel, which allows developers and
-                            designers
-                            to preview all variants of the components by changing the props.
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb2">
-                            What is @scania/tegel? 🧱
-                        </h4>
-
-
-
-
-                        <p>
-                            In short, the new @scania/tegel package is an improvement and continuation of the previous
-                            @scania/component,
-                            @scania/theme-light and @scania/icons packages. These three packages have now instead been merged into one
-                            to
-                            simplify both the installation process, but also to make it easier for us to maintain and keep improving
-                            going
-                            forward.
-                        </p>
-                        <p>
-                            The new @scania/tegel is also shipped with types. This makes integrations in other Stenciljs
-                            projects
-                            possible, but also improves the developer experience with intellisence and autocompletion, and of course
-                            type
-                            safety. In this work we have also bumped the Stenciljs version (the compiler used to build our components)
-                            to
-                            the
-                            latest major.
-                        </p>
-                        <p>
-                            And we have saved the best for last, @scania/tegel is 100% web components. Previous packages
-                            had
-                            some
-                            web components, but also CSS class components, these were utility classes that could be added to a predefined
-                            HTML
-                            structure to create the look and feel of Tegel. Now we are making a big effort to provide all components as
-                            web components.
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb2">
-                            What improvements does @scania/tegel have? 🚀
-                        </h4>
-
-
-                        <p>
-                            So, what we are striving for in the new package is:
-
-                        <ul>
-                            <li>Easy installation and updates</li>
-                            <li>A clear and intuitive API</li>
-                            <li>Types to be included in package bundle</li>
-                            <li>All input elements to work within a form</li>
-                            <li>Only web components</li>
-                            <li>Dark mode</li>
-                            <li>Improved interactive documentation - Storybook</li>
-                        </ul>
-
-                        <p>
-                            With this new package we are creating a foundation for us to stand on going forward. We will keep improving
-                            and
-                            maintaining it after its initial release and with the changes we are introducing now we hope to be able to
-                            do
-                            this as
-                            smoothly as possible.
-                        </p>
-
-
-
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb2">
-                            Removing CSS class components ❌
-                        </h4>
-
-
-                        <p>
-                            With this new package we are also removing our CSS components and instead introducing web component
-                            counterparts to these. This means that every component that was available as a CSS component in
-                            @scania/components will have a web component alternative in @scania/tegel. This removal will be done in our
-                            next
-                            release of @scania/tegel. This change does not change the current @scania/components package.
-
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb2">
-                            Prefix change 🔁
-                        </h4>
-
-
-                        <tds-link class="tds-u-mt2 tds-body-01">
-                            <a target="_self" href="?path=/story/intro-announcements--prefix-change">Read more here.</a>
-                        </tds-link>
-                        <p>
-                            We are also working on a prefix change for our new package. Instead of "sdds" the components, CSS variables
-                            and
-                            utility classes will instead be prefixed with something else, for example:
-                        <ul>
-                            <li> <{prefix}-button /> </li>
-                            <li> --{prefix}-button-color </li>
-                            <li>.{prefix}-u-flex</li>
-                        </ul>
-                        <p>
-                            This is done to have a clear distinction between what was @scania/components and what is @scania/tegel. What
-                            it
-                            also
-                            does is that it enables the two solutions to be installed alongside each other. This means that your
-                            migration
-                            can
-                            be
-                            done incrementally.
-                        </p>
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb1">
-                            Migration docs 📜
-                        </h4>
-
-
-                        <p>
-                            Migrations are always hard, but during the last couple of months we have put a lot of effort into creating a
-                            "migration document", which explains and highlights all the changes in our API from version 4 of
-                            @scania/components
-                            and @scania/tegel. We hope that this will ease your migration to our new package. The migration document
-                            will
-                            continue to be updated until we release 1.0 and is available
-                            <tds-link><a target="_self"
-                                    href="?path=/story/intro-migrating-from-components-v4--page">here.</a></tds-link>
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb1">
-                            Support for @scania/components 🤳
-                        </h4>
-
-
-                        <p>
-                            We will keep supporting @scania/components for a short while going forward, however we see no major
-                            updates
-                            being
-                            done to the package. This means we will keep answering and helping with support questions and do
-                            minor
-                            releases with
-                            bugfixes, but we are not introducing any new features.
-
-                        </p>
-                    </section>
-                    <section>
-                        <h4 class="tds-u-mb1">
-                            When can I try our @scania/tegel? 🧪
-                        </h4>
-
-
-                        <p>
-                            Today! Some of you have already tried this package out, and provided us with valuable feedback,
-                            thank
-                            you!
-                            But
-                            please note that this package is still in beta and breaking changes are to be expected before we
-                            release
-                            1.0. The
-                            package is available via npm and an installation guide is available <tds-link><a
-                                    href="https://www.npmjs.com/package/@scania/tegel">here.</a></tds-link>
-
-                        </p>
-                    </section>
-                    <section>
-
-                        <h4 class="tds-u-mb1">
-                            Want to get in touch? 📞
-                        </h4>
-
-
-                        <p>
-                            Awesome! We are available via teams and have two support channels. One for
-                            <tds-link>
-                                <a
-                                    href="https://teams.microsoft.com/l/channel/19%3a5e33f67fe502441f914fbcdc6e2548f5%40thread.skype/Development%2520support?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac">development</a>
-                            </tds-link>
-                            and one for
-                            <tds-link>
-                                <a
-                                    href="https://teams.microsoft.com/l/channel/19%3A8d30ded56af14672b471062ec1e66345%40thread.skype/Design%2520support?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac">design.</a>
-
-                            </tds-link>
-                            If you want to submit a bug report or feature request, please do so via our
-                            <tds-link>
-                                <a href="https://github.com/scania-digital-design-system/tegel/issues">GitHub</a>
-                            </tds-link>.
-
-                        <p>
-                            All the best,<br />
-                            The Tegel Team.
-                        </p>
-                        </p>
-                    </section>
-                </article>
-  `,
-};

package/dist/collection/stories/utility/color/background-color.stories.js

@@ -1,96 +0,0 @@
-import formatHtmlPreview from "../../formatHtmlPreview";
-export default {
-    title: 'Utilities/Colors',
-    parameters: {
-        layout: 'centered',
-    },
-    argTypes: {
-        backgroundColor: {
-            name: 'Background color',
-            description: 'The color of the text',
-            control: {
-                type: 'select',
-            },
-            options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-        },
-        greyScale: {
-            name: 'Scale',
-            description: 'The color scale used.',
-            control: {
-                type: 'select',
-            },
-            options: [
-                '50',
-                '100',
-                '200',
-                '300',
-                '400',
-                '500',
-                '600',
-                '700',
-                '800',
-                '846',
-                '868',
-                '900',
-                '958',
-            ],
-            if: { arg: 'backgroundColor', eq: 'grey' },
-        },
-        redScale: {
-            name: 'Scale',
-            description: 'The color scale used.',
-            control: {
-                type: 'select',
-            },
-            options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-            if: { arg: 'backgroundColor', eq: 'red' },
-        },
-        blueScale: {
-            name: 'Scale',
-            description: 'The color scale used.',
-            control: {
-                type: 'select',
-            },
-            options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-            if: { arg: 'backgroundColor', eq: 'blue' },
-        },
-    },
-    args: {
-        backgroundColor: 'blue',
-        blueScale: '500',
-        redScale: '500',
-        greyScale: '958',
-    },
-};
-const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
-    let scale = 100;
-    switch (backgroundColor) {
-        case 'blue':
-            scale = blueScale;
-            break;
-        case 'grey':
-            scale = greyScale;
-            break;
-        case 'red':
-            scale = redScale;
-            break;
-        default:
-            scale = blueScale;
-            break;
-    }
-    return formatHtmlPreview(`
-        <style>
-            .demo-wrapper{
-                height: 400px;
-                width: 400px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-        </style>
-        <div class="tds-background-${backgroundColor}-${scale} demo-wrapper">
-            <h1>background-color:${backgroundColor}</h1>
-        </div>
-          `);
-};
-export const BackgroundColor = Template.bind({});

package/dist/collection/stories/utility/color/text-color.stories.js

@@ -1,94 +0,0 @@
-import formatHtmlPreview from "../../formatHtmlPreview";
-export default {
-    title: 'Utilities/Colors',
-    parameters: {
-        layout: 'centered',
-    },
-    argTypes: {
-        color: {
-            name: 'Color',
-            description: 'The color of the text',
-            control: {
-                type: 'select',
-            },
-            options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
-        },
-        greyScale: {
-            name: 'Scale',
-            description: 'The color scale used.',
-            control: {
-                type: 'select',
-            },
-            options: [
-                '50',
-                '100',
-                '200',
-                '300',
-                '400',
-                '500',
-                '600',
-                '700',
-                '800',
-                '846',
-                '868',
-                '900',
-                '958',
-            ],
-            if: { arg: 'color', eq: 'grey' },
-        },
-        redScale: {
-            name: 'Scale',
-            description: 'The color scale used.',
-            control: {
-                type: 'select',
-            },
-            options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-            if: { arg: 'color', eq: 'red' },
-        },
-        blueScale: {
-            name: 'Scale',
-            description: 'The color scale used.',
-            control: {
-                type: 'select',
-            },
-            options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-            if: { arg: 'color', eq: 'blue' },
-        },
-    },
-    args: {
-        color: 'blue',
-        blueScale: '500',
-        redScale: '500',
-        greyScale: '958',
-    },
-};
-const Template = ({ color, greyScale, blueScale, redScale }) => {
-    let scale = 100;
-    switch (color) {
-        case 'blue':
-            scale = blueScale;
-            break;
-        case 'grey':
-            scale = greyScale;
-            break;
-        case 'red':
-            scale = redScale;
-            break;
-        default:
-            scale = blueScale;
-            break;
-    }
-    return formatHtmlPreview(`
-  <style>
-    .demo-wrapper h1 {
-      margin: 0;
-      width: 300px;
-    }
-  </style>
-  <div class="demo-wrapper">
-  <h1 class="tds-text-${color}-${scale}">A text ${color} heading</h1>
-  <p class="tds-text-${color}-${scale}">A text ${color} paragraph</p>
-  </div>
-  `);
-};
-export const TextColor = Template.bind({});

package/dist/tegel/p-556600b1.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as s,H as a,g as l}from"./p-4d661599.js";const d=["multiselect","expandableRows","compactDesign","noMinWidth","verticalDividers"],o=class{constructor(a){t(this,a),this.tdsSort=e(this,"tdsSort",7),this.internalSortButtonClicked=e(this,"internalSortButtonClicked",6),this.internalTdsTextAlign=e(this,"internalTdsTextAlign",6),this.internalTdsHover=e(this,"internalTdsHover",6),this.sortButtonClick=()=>{this.sortingDirection="asc"!==this.sortingDirection?"asc":"desc",this.sortedByMyKey=!0,this.tdsSort.emit({tableId:this.tableId,columnKey:this.cellKey,sortingDirection:this.sortingDirection}),this.internalSortButtonClicked.emit({tableId:this.tableId,key:this.cellKey})},this.headerCellContent=()=>this.sortable?s("button",{class:"tds-table__header-button",onClick:()=>this.sortButtonClick()},s("span",{class:"tds-table__header-button-text",style:{textAlign:this.textAlignState}},this.cellValue),null===this.sortingDirection&&s("svg",{class:"tds-table__header-button-icon",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 15"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z"}),s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"}),s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"})),this.sortingDirection&&s("svg",{class:"tds-table__header-button-icon "+("desc"===this.sortingDirection?"tds-table__header-button-icon--rotate":""),fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"}))):s("p",{class:"tds-table__header-text",style:{textAlign:this.textAlignState}},this.cellValue),this.onHeadCellHover=t=>{this.internalTdsHover.emit({tableId:this.tableId,key:t})},this.cellKey=void 0,this.cellValue=void 0,this.customWidth=void 0,this.sortable=!1,this.textAlign=void 0,this.textAlignState=void 0,this.sortingDirection="asc",this.sortedByMyKey=!1,this.verticalDividers=!1,this.compactDesign=!1,this.noMinWidth=!1,this.multiselect=!1,this.enableToolbarDesign=!1,this.tableId="",this.expandableRows=!1}internalTdsPropChangeListener(t){this.tableId===t.detail.tableId&&t.detail.changed.filter((t=>d.includes(t))).forEach((e=>{if(void 0===this[e])throw new Error(`Table prop is not supported: ${e}`);this[e]=t.detail[e]}))}updateOptionsContent(t){const{tableId:e,key:s}=t.detail;this.tableId===e&&this.cellKey!==s&&(this.sortedByMyKey=!1,setTimeout((()=>{this.sortingDirection=null}),200))}connectedCallback(){this.tableEl=this.host.closest("tds-table"),this.tableId=this.tableEl.tableId}componentWillLoad(){d.forEach((t=>{this[t]=this.tableEl[t]}))}componentWillRender(){this.textAlignState="right"===this.textAlign||"end"===this.textAlign?"right":"left",this.internalTdsTextAlign.emit([this.tableId,this.cellKey,this.textAlignState]),this.enableToolbarDesign=this.host.closest("tds-table").getElementsByTagName("tds-table-toolbar").length>=1}render(){return s(a,{class:{"tds-table__header-cell":!0,"tds-table__header-cell--sortable":this.sortable,"tds-table__header-cell--is-sorted":this.sortedByMyKey,"tds-table__header-cell--custom-width":""!==this.customWidth,"tds-table__header-cell--right-align":"right"===this.textAlignState,"tds-table--compact":this.compactDesign,"tds-table--divider":this.verticalDividers,"tds-table--no-min-width":this.noMinWidth,"tds-table--extra-column":this.multiselect||this.expandableRows,"tds-table--toolbar-available":this.enableToolbarDesign},style:{width:this.customWidth},onMouseOver:()=>this.onHeadCellHover(this.cellKey),onMouseLeave:()=>this.onHeadCellHover("")},this.headerCellContent())}get host(){return l(this)}};o.style=":host(.tds-table__header-cell){box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.tds-table__header-cell) *{box-sizing:border-box}:host(.tds-table__header-cell) .tds-table__header-text{padding:0 16px;margin:0}:host(.tds-table__header-cell--sortable) .tds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);text-align:left;color:var(--tds-table-header-btn-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon{flex:0 0 16px;height:16px;width:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--right-align) .tds-table__header-button{text-align:right;justify-content:end;flex-direction:row-reverse}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact){height:33px}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}:host(.tds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.tds-table--toolbar-available){border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available){border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type){border-top-right-radius:0}";export{o as tds_header_cell}

package/dist/tegel/p-c6553022.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as o,H as e,g as i}from"./p-4d661599.js";const l=class{constructor(o){t(this,o),this.tdsChange=s(this,"tdsChange",6),this.tdsFocus=s(this,"tdsFocus",6),this.tdsBlur=s(this,"tdsBlur",6),this.tdsInput=s(this,"tdsInput",6),this.setDefaultOption=()=>{Array.from(this.host.children).filter((t=>"TDS-DROPDOWN-OPTION"===t.tagName)).forEach((t=>(this.multiselect?this.defaultValue.split(",").forEach((s=>{s===t.value&&(t.setSelected(!0),this.value=this.value?[...this.value,t.value]:[t.value])})):this.defaultValue===t.value?(t.setSelected(!0),this.value=[t.value]):t.setSelected(!1),this.setValueAttribute(),t)))},this.getChildren=()=>{const t=Array.from(this.host.children).filter((t=>"TDS-DROPDOWN-OPTION"===t.tagName));if(0!==t.length)return t;console.warn("TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.")},this.getOpenDirection=()=>{var t,s,o,e,i;if("auto"===this.openDirection||!this.openDirection){const l=null!==(s=null===(t=this.dropdownList)||void 0===t?void 0:t.offsetHeight)&&void 0!==s?s:0;return(null!==(i=null===(e=(o=this.host).getBoundingClientRect)||void 0===e?void 0:e.call(o).top)&&void 0!==i?i:0)+l+57>window.innerHeight?"up":"down"}return this.openDirection},this.getSelectedChildren=()=>{var t;return null===(t=this.value)||void 0===t?void 0:t.map((t=>this.getChildren().find((s=>s.value===t)))).filter(Boolean)},this.getSelectedChildrenLabels=()=>{var t;return null===(t=this.getSelectedChildren())||void 0===t?void 0:t.map((t=>t.textContent.trim()))},this.getValue=()=>{const t=this.getSelectedChildrenLabels();return t?this.filter?null==t?void 0:t.join(", "):null==t?void 0:t.toString():""},this.setValueAttribute=()=>{var t,s,o;""===(null===(t=this.value)||void 0===t?void 0:t.toString())&&(this.value=null),this.host.setAttribute("value",null!==(o=null===(s=this.value)||void 0===s?void 0:s.map((t=>t)).toString())&&void 0!==o?o:null)},this.handleFilter=t=>{this.tdsInput.emit(t);const s=t.target.value.toLowerCase(),o=this.getChildren();""===s?(o.forEach((t=>(t.removeAttribute("hidden"),t))),this.filterResult=null):this.filterResult=o.filter((t=>(this.normalizeString(t.textContent).toLowerCase().includes(this.normalizeString(s).toLowerCase())?t.removeAttribute("hidden"):t.setAttribute("hidden",""),!t.hasAttribute("hidden")))).length},this.handleFocus=t=>{this.tdsFocus.emit(t)},this.handleBlur=t=>{this.tdsBlur.emit(t)},this.handleChange=()=>{var t,s;this.tdsChange.emit({name:this.name,value:null!==(s=null===(t=this.value)||void 0===t?void 0:t.map((t=>t)).toString())&&void 0!==s?s:null})},this.name=void 0,this.disabled=!1,this.helper=void 0,this.label=void 0,this.labelPosition=void 0,this.modeVariant=null,this.openDirection="auto",this.placeholder=void 0,this.size="lg",this.error=!1,this.multiselect=!1,this.filter=!1,this.normalizeText=!0,this.noResultText="No result",this.defaultValue=void 0,this.open=!1,this.value=void 0,this.filterResult=void 0,this.filterFocus=void 0}async reset(){this.internalReset(),this.handleChange()}async setValue(t,s){let o;o="string"==typeof t?[t]:t,!this.multiselect&&o.length>1&&(console.warn("Tried to select multiple items, but multiselect is not enabled."),o=[o[0]]),this.internalReset();for(let t=0;t<o.length;t++)this.getChildren().some((s=>s.value===o[t]))||o.splice(t,1);this.value=o,this.setValueAttribute(),this.selectChildrenAsSelectedBasedOnSelectionProp(),this.handleChange();const e=this.getSelectedChildren().map((t=>({value:t.value,label:t.textContent.trim()})));return this.inputElement.value=this.filter?this.getValue():e.length>0?e[0].label:"",e}async appendValue(t){this.setValue(this.multiselect&&this.value?[...this.value,t]:t)}async removeValue(t){var s,o;let e;return this.multiselect?null===(s=this.getChildren())||void 0===s||s.forEach((s=>{var o;return s.value===t&&(this.value=null===(o=this.value)||void 0===o?void 0:o.filter((t=>t!==s.value)),e=s.textContent.trim(),s.setSelected(!1)),s})):this.reset(),this.handleChange(),this.setValueAttribute(),null===(o=this.value)||void 0===o?void 0:o.map((t=>({value:t,label:e})))}async close(){this.open=!1}onAnyClick(t){this.open&&!t.composedPath().includes(this.host)&&(this.open=!1)}async onKeyDown(t){const{activeElement:s}=document;if(!s)return;const o=this.getChildren();if("ArrowDown"===t.key){const t=s.nextElementSibling?o.findIndex((t=>t===s.nextElementSibling)):0;o[((t,s)=>{if(void 0===t[s])return 0;for(let o=s;o<t.length;o++)if(!t[o].disabled)return o})(o,t)].focus()}else"ArrowUp"===t.key?o[((t,s)=>{if(void 0===t[s])return t.length-1;for(let o=s;o>=0;o--)if(!t[o].disabled)return o})(o,s.nextElementSibling?this.getChildren().findIndex((t=>t===s.previousElementSibling)):0)].focus():"Escape"===t.key&&(this.open=!1)}handleOpenState(){this.filter&&this.multiselect&&(this.open||(this.inputElement.value=this.getValue()))}componentWillLoad(){this.defaultValue&&this.setDefaultOption()}normalizeString(t){return this.normalizeText?t.normalize("NFD").replace(/\p{Diacritic}/gu,""):t}internalReset(){this.getChildren().forEach((t=>(t.setSelected(!1),t))),this.value=null,this.setValueAttribute()}selectChildrenAsSelectedBasedOnSelectionProp(){this.getChildren().forEach((t=>{this.value.forEach((s=>{t.value!==s?this.multiselect||t.setSelected(!1):t.setSelected(!0)}))}))}render(){var t,s,i,l;return((t,s,o,e)=>{let i=t.querySelector("input");t.querySelector("input")||(i=t.ownerDocument.createElement("input"),i.type="hidden",t.appendChild(i)),i.disabled=e,i.name=s,i.value=o||""})(this.host,this.name,null===(t=this.value)||void 0===t?void 0:t.map((t=>t)).toString(),this.disabled),o(e,{role:"select",class:this.modeVariant?`tds-mode-variant-${this.modeVariant}`:""},this.label&&"outside"===this.labelPosition&&o("div",{class:"label-outside "+(this.disabled?"disabled":"")},this.label),o("div",{class:`dropdown-select ${this.size} ${this.disabled?"disabled":""}`},this.filter?o("div",{class:{filter:!0,focus:this.filterFocus,disabled:this.disabled,error:this.error}},o("div",{class:"value-wrapper"},this.label&&"inside"===this.labelPosition&&this.placeholder&&o("div",{class:`label-inside ${this.size}`},this.label),this.label&&"inside"===this.labelPosition&&!this.placeholder&&o("div",{class:`\n                    label-inside-as-placeholder\n                    ${this.size}\n                    ${(null===(s=this.value)||void 0===s?void 0:s.length)?"selected":""}\n                    `},this.label),o("input",{ref:t=>this.inputElement=t,class:"inside"===this.labelPosition?"placeholder":"",type:"text",placeholder:this.placeholder,value:this.getValue(),disabled:this.disabled,onInput:t=>this.handleFilter(t),onBlur:t=>{this.filterFocus=!1,this.handleBlur(t)},onFocus:t=>{this.open=!0,this.filterFocus=!0,this.handleFocus(t)},onKeyDown:t=>{"Escape"===t.key&&(this.open=!1)}})),o("tds-icon",{onClick:()=>{this.open=!this.open,this.open&&this.inputElement.focus()},class:this.open?"open":"closed",name:"chevron_down",size:"16px"})):o("button",{onClick:()=>{this.open=!this.open},onKeyDown:t=>{"Escape"===t.key&&(this.open=!1)},class:`\n                ${this.value?"value":"placeholder"}\n                ${this.open?"open":"closed"}\n                ${this.error?"error":""}\n                `,disabled:this.disabled},o("div",{class:`value-wrapper ${this.size}`},this.label&&"inside"===this.labelPosition&&this.placeholder&&o("div",{class:`label-inside ${this.size}`},this.label),this.label&&"inside"===this.labelPosition&&!this.placeholder&&o("div",{class:`\n                    label-inside-as-placeholder\n                    ${this.size}\n                    ${(null===(i=this.value)||void 0===i?void 0:i.length)?"selected":""}\n                    `},this.label),o("div",{class:`placeholder ${this.size}`},(null===(l=this.value)||void 0===l?void 0:l.length)?this.getValue():this.placeholder),o("tds-icon",{class:this.open?"open":"closed",name:"chevron_down",size:"16px"})))),o("div",{ref:t=>this.dropdownList=t,class:`dropdown-list\n            ${this.size}\n            ${this.open?"open":"closed"}\n            ${this.getOpenDirection()}\n            ${this.label&&"outside"===this.labelPosition?"label-outside":""}`},o("slot",null),0===this.filterResult&&""!==this.noResultText&&o("div",{class:`no-result ${this.size}`},this.noResultText)),this.helper&&o("div",{class:`helper ${this.error?"error":""} ${this.disabled?"disabled":""}`},this.error&&o("tds-icon",{name:"error",size:"16px"}),this.helper))}get host(){return i(this)}static get watchers(){return{open:["handleOpenState"]}}};l.style='@charset "UTF-8";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}';export{l as tds_dropdown}