@scania/tegel 1.4.0 → 1.6.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-0657ff1a.entry.js

@@ -1 +0,0 @@
-import{r,h as s,H as t}from"./p-4d661599.js";const e=class{constructor(s){r(this,s),this.getIconName=()=>{switch(this.variant){case"information":default:return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick"}},this.header=void 0,this.modeVariant=null,this.variant="information",this.noIcon=!1,this.minimal=!1}render(){return s(t,null,s("div",{class:`\n        wrapper ${this.variant}\n        ${this.minimal?"minimal":""}\n        ${null!==this.modeVariant?`tds-mode-variant-${this.modeVariant}`:""}`},!this.noIcon&&s("tds-icon",{name:this.getIconName(),size:"20px"}),s("div",{class:"content"},this.header&&s("div",{class:"header"},this.header),!this.minimal&&s("div",{class:"extended-message"},s("slot",null)))))}};e.style=":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{background-color:var(--tds-message-type-error-background);border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper.minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .wrapper.minimal .header{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .wrapper.minimal.error .header{color:var(--tds-negative)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--tds-message-color);padding:2px 0}:host .content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .content .extended-message{color:var(--tds-message-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .tds-mode-variant-primary{--tds-message-background:var(--tds-message-background-primary)}:host .tds-mode-variant-secondary{--tds-message-background:var(--tds-message-background-secondary)}";export{e as tds_message}

package/dist/tegel/p-0d0c6493.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as d,g as i}from"./p-4d661599.js";import{h as l}from"./p-ae110fc2.js";const s=class{constructor(d){t(this,d),this.tdsChange=e(this,"tdsChange",6),this.tdsInput=e(this,"tdsInput",6),this.tdsFocus=e(this,"tdsFocus",6),this.tdsBlur=e(this,"tdsBlur",6),this.type="text",this.labelPosition="no-label",this.label="",this.helper=void 0,this.placeholder="",this.value="",this.disabled=!1,this.readOnly=!1,this.size="lg",this.modeVariant=null,this.noMinWidth=!1,this.name="",this.state="default",this.maxLength=void 0,this.autofocus=!1,this.focusInput=void 0}handleChange(t){this.tdsChange.emit(t)}handleInput(t){this.tdsInput.emit(t),this.value=t.target.value}handleFocus(t){this.textInput.focus(),this.focusInput=!0,this.tdsFocus.emit(t)}handleBlur(t){this.focusInput=!1,this.tdsBlur.emit(t)}render(){var t;const e=l("prefix",this.host),i=l("suffix",this.host);return d("div",{class:`\n        ${this.noMinWidth?"form-text-field-nomin":""}\n        ${this.focusInput&&!this.disabled?"form-text-field text-field-focus":" form-text-field"}\n        ${this.value?"text-field-data":""}\n        ${"inside"===this.labelPosition&&"sm"!==this.size?"text-field-container-label-inside":""}\n        ${this.disabled?"form-text-field-disabled":""}\n        ${this.readOnly?"form-text-field-readonly":""}\n        ${null!==this.modeVariant?`tds-mode-variant-${this.modeVariant}`:""}\n        ${"md"===this.size?"form-text-field-md":""}\n        ${"sm"===this.size?"form-text-field-sm":""}\n        ${"error"===this.state||"success"===this.state?`form-text-field-${this.state}`:""}\n        `},"outside"===this.labelPosition&&d("div",{class:"text-field-label-outside"},d("div",null,this.label)),d("div",{onClick:()=>this.textInput.focus(),class:"text-field-container"},e&&d("div",{class:`text-field-slot-wrap-prefix text-field-${this.state}`},d("slot",{name:"prefix"})),d("div",{class:"text-field-input-container"},d("input",{ref:t=>this.textInput=t,class:`text-field-input text-field-input-${this.size}`,type:this.type,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,autofocus:this.autofocus,maxlength:this.maxLength,name:this.name,onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onFocus:t=>{this.readOnly||this.handleFocus(t)},onBlur:t=>{this.readOnly||this.handleBlur(t)}}),"inside"===this.labelPosition&&"sm"!==this.size&&d("label",{class:"text-field-label-inside"},this.label)),d("div",{class:"text-field-bar"}),i&&d("div",{class:`text-field-slot-wrap-suffix text-field-${this.state}`},d("slot",{name:"suffix"})),d("span",{class:"text-field-icon__readonly"},d("tds-icon",{name:"edit_inactive",size:"20px"})),d("span",{class:"text-field-icon__readonly-label"},"This field is non-editable")),(this.helper||this.maxLength>0)&&d("div",{class:"text-field-helper"},"error"===this.state&&d("div",{class:"text-field-helper-error-state"},d("tds-icon",{name:"error",size:"16px"}),this.helper),"error"!==this.state&&this.helper,this.maxLength>0&&d("div",{class:"text-field-textcounter"},null===this.value?0:null===(t=this.value)||void 0===t?void 0:t.length,d("span",{class:"text-field-textcounter-divider"}," / "),this.maxLength)))}get host(){return i(this)}};s.style='.text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-lg.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-lg.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-md.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-md.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-sm.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-sm.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:18px;color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{pointer-events:none}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{padding-right:54px;background-color:transparent}.form-text-field-success.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.sc-tds-text-field .text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}';export{s as tds_text_field}