@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/select/select.css

@@ -1,222 +0,0 @@
-:host {
-  --select-color: var(--leu-color-black-100);
-  --select-color-disabled: var(--leu-color-black-20);
-  --select-color-invalid: var(--leu-color-func-red);
-  --select-color-focus: var(--leu-color-func-cyan);
-  --select-border-width: 2px;
-
-  --select-label-color: var(--leu-color-black-100);
-  --select-label-color-disabled: var(--select-color-disabled);
-  --select-label-color-empty: var(--leu-color-black-60);
-
-  --select-option-color: var(--leu-color-black-60);
-  --select-option-color-focus: var(--select-color);
-
-  --select-border-color: var(--leu-color-black-40);
-  --select-border-color-focus: var(--select-color-focus);
-  --select-border-color-disabled: var(--leu-color-black-20);
-  --select-border-color-invalid: var(--select-color-invalid);
-
-  --select-error-color: var(--leu-color-black-0);
-
-  --select-clear-color: var(--leu-color-black-60);
-
-  --select-font-regular: var(--leu-font-family-regular);
-  --select-font-black: var(--leu-font-family-black);
-
-  --select-apply-button-color: var(--leu-color-black-100);
-  --select-apply-button-color-focus: var(--leu-color-black-80);
-  --select-apply-button-font-color: var(--leu-color-black-0);
-
-  --select-box-shadow-short: var(--leu-box-shadow-short);
-  --select-box-shadow-regular: var(--leu-box-shadow-regular);
-
-  position: relative;
-  display: block;
-
-  font-family: var(--select-font-regular);
-}
-
-:host([disabled]) {
-  --select-color: var(--select-color-disabled);
-  --select-color-focus: var(--select-color-disabled);
-  --select-border-color: var(--select-border-color-disabled);
-  --select-label-color: var(--select-label-color-disabled);
-  --select-border-color-focus: var(--select-border-color-disabled);
-  --select-clear-color: var(--select-color-disabled);
-}
-
-.select-toggle {
-  min-height: 4.5rem;
-  display: block;
-  width: 100%;
-
-  appearance: none;
-  border: var(--select-border-width) solid var(--select-border-color);
-  border-radius: 2px;
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 1.375rem 3rem 1.375rem 1rem;
-
-  background: var(--leu-color-black-0);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  cursor: pointer;
-  text-align: left;
-}
-
-.select-toggle:hover,
-.select-toggle:focus {
-  border-color: var(--select-border-color-focus);
-}
-
-.select-toggle.filled.labeled {
-  padding-bottom: 0.75rem;
-  padding-top: 2rem;
-  color: var(--select-color);
-}
-
-.select-toggle:focus-visible {
-  outline: var(--select-border-width) solid var(--select-border-color-focus);
-  outline-offset: 2px;
-}
-
-.label {
-  position: absolute;
-  top: 1.5rem;
-  transition: top 0.1s ease;
-  font-family: var(--select-font-regular);
-}
-
-:host([required]) .label::after {
-  content: "*";
-}
-
-.clear-button {
-  --_length: 1.5rem;
-
-  width: var(--_length);
-  height: var(--_length);
-  padding: 0;
-
-  position: absolute;
-  top: calc(50% - var(--_length) / 2);
-  right: 2.6rem;
-
-  cursor: pointer;
-
-  background: none;
-  color: var(--select-clear-color);
-  border: none;
-
-  /* border-radius is only defined for a nice focus outline */
-  border-radius: 2px;
-}
-
-.clear-button:focus-visible {
-  outline: var(--select-border-width) solid var(--select-border-color-focus);
-  outline-offset: 2px;
-}
-
-.select-toggle[disabled],
-.select-toggle[disabled] .clear-button {
-  cursor: unset;
-}
-
-.select-toggle[disabled] .label {
-  color: var(--select-label-color);
-}
-
-.select-toggle.open .label,
-.select-toggle.filled .label,
-.select-toggle:focus .label {
-  color: var(--select-label-color);
-  font-family: var(--select-font-black);
-  font-size: 0.75rem;
-
-  top: 0.875rem;
-
-  transition: top 0.1s ease;
-}
-
-.arrow-icon {
-  --_length: 1.5rem;
-
-  width: var(--_length);
-  height: var(--_length);
-  padding: 0;
-
-  position: absolute;
-  top: calc(50% - var(--_length) / 2);
-  right: 1rem;
-
-  transform: rotate(0deg);
-  transition: transform 0.25s ease;
-
-  color: var(--select-color);
-}
-
-.select-toggle.open .arrow-icon {
-  transform: rotate(180deg);
-}
-
-.select-menu-container {
-  position: static;
-  overflow: auto;
-
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-  max-height: min(var(--auto-size-available-height), 24rem);
-
-  padding: 0;
-  margin: 0;
-
-  border: none;
-  border-radius: 1px;
-  background-color: white;
-  box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
-}
-
-.menu {
-  display: block;
-  overflow: auto;
-}
-
-.before,
-.after {
-  display: block;
-  margin: 0.75rem;
-}
-
-.select:not(.select--has-before) .before {
-  display: none;
-}
-
-.select:not(.select--has-after) .after {
-  display: none;
-}
-
-.apply-button-wrapper {
-  background-color: var(--leu-color-black-10);
-  padding: 0.75rem;
-}
-
-.apply-button {
-  display: block;
-}
-
-.select-search {
-  margin: 0.75rem;
-}
-
-.filter-message-empty {
-  background: var(--leu-color-black-0);
-  color: var(--leu-color-black-transp-60);
-
-  padding: 0.75rem;
-  margin: 0;
-}

package/src/components/select/stories/select.stories.ts

@@ -1,173 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import { LeuSelect } from "../leu-select.js"
-import "../../menu/leu-menu.js"
-import "../../menu/leu-menu-item.js"
-
-import { MUNICIPALITIES } from "../test/fixtures.js"
-
-export default {
-  title: "Components/Select",
-  component: "leu-select",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-}
-
-const OPTIONS_EXAMPLES = [
-  { label: "Option 1", value: "1" },
-  "Option 2",
-  "Option 3",
-  "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird.",
-]
-
-function Template({
-  label,
-  options,
-  value,
-  disabled = false,
-  clearable = false,
-  filterable = false,
-  multiple = false,
-  required = false,
-  before,
-  after,
-}) {
-  return html`
-    <div style="margin-top: 50vh"></div>
-    <leu-select
-      class="dropdown"
-      name="select"
-      label=${ifDefined(label)}
-      .value=${ifDefined(value)}
-      ?required=${required}
-      ?clearable=${clearable}
-      ?disabled=${disabled}
-      ?filterable=${filterable}
-      ?multiple=${multiple}
-    >
-      ${before ? html`<div slot="before">${before}</div>` : ""}
-      ${after ? html`<div slot="after">${after}</div>` : ""}
-      ${options.map(
-        (option) => html`
-          <leu-menu-item
-            .value=${typeof option === "object" && option !== null
-              ? option.value
-              : option}
-            .label=${LeuSelect.getOptionLabel(option)}
-          >
-            ${LeuSelect.getOptionLabel(option)}
-          </leu-menu-item>
-        `,
-      )}
-    </leu-select>
-    <div style="margin-top: 50vh"></div>
-  `
-}
-
-function TemplateSlots(args) {
-  const before = html`<div>before</div>`
-  const after = html`<div>after <input type="text" /></div>`
-
-  return Template({ ...args, before, after })
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: "Gemeinde",
-  options: OPTIONS_EXAMPLES,
-}
-Regular.parameters = {
-  docs: {
-    description: {
-      story: `To render a basic input field only the \`label\` attribute is required. The \`label\` is necessary for accessibility reasons.
-
-        The label is also used inside \`aria-label\` of the clear button ("\${label} zurücksetzen"). Therefore, the label must not contain a verb like "Gemende auswählen". This would be confusing for screen reader users.
-        `,
-    },
-  },
-}
-
-export const Filled = Template.bind({})
-Filled.args = {
-  label: "Gemeinde",
-  options: OPTIONS_EXAMPLES,
-  value: [OPTIONS_EXAMPLES[1]],
-}
-
-export const Clearable = Template.bind({})
-Clearable.args = {
-  label: "Gemeinde",
-  options: OPTIONS_EXAMPLES,
-  value: [OPTIONS_EXAMPLES[1]],
-  clearable: true,
-}
-
-export const Required = Template.bind({})
-Required.args = {
-  label: "Gemeinde",
-  options: OPTIONS_EXAMPLES,
-  required: true,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  label: "Gemeinde",
-  options: OPTIONS_EXAMPLES,
-  clearable: true,
-  disabled: true,
-}
-
-export const DisabledFilled = Template.bind({})
-DisabledFilled.args = {
-  label: "Gemeinde",
-  options: OPTIONS_EXAMPLES,
-  value: [OPTIONS_EXAMPLES[1]],
-  clearable: true,
-  disabled: true,
-}
-
-export const Filterable = Template.bind({})
-Filterable.args = {
-  label: "Gemeinde",
-  options: MUNICIPALITIES,
-  clearable: true,
-  disabled: false,
-  filterable: true,
-}
-
-/* I also tried sloting the before and after. It doesn't work because the blur event is triggered everytime a slot is clicked */
-export const BeforeAfterSlot = TemplateSlots.bind({})
-BeforeAfterSlot.args = {
-  label: "Gemeinde",
-  options: MUNICIPALITIES,
-  clearable: true,
-  disabled: false,
-  filterable: false,
-  multiple: true,
-}
-
-export const Multiple = Template.bind({})
-Multiple.args = {
-  label: "Gemeinde",
-  options: MUNICIPALITIES,
-  clearable: true,
-  disabled: false,
-  filterable: true,
-  multiple: true,
-}
-
-export const MultipleFilled = Template.bind({})
-MultipleFilled.args = {
-  label: "Gemeinde",
-  options: MUNICIPALITIES,
-  value: MUNICIPALITIES.slice(0, 2),
-  clearable: true,
-  disabled: false,
-  filterable: true,
-  multiple: true,
-}

package/src/components/select/test/fixtures.ts

@@ -1,162 +0,0 @@
-export const MUNICIPALITIES = [
-  "Aeugst am Albis",
-  "Affoltern am Albis",
-  "Bonstetten",
-  "Hausen am Albis",
-  "Hedingen",
-  "Kappel am Albis",
-  "Knonau",
-  "Maschwanden",
-  "Mettmenstetten",
-  "Obfelden",
-  "Ottenbach",
-  "Rifferswil",
-  "Stallikon",
-  "Wettswil am Albis",
-  "Benken (ZH)",
-  "Berg am Irchel",
-  "Buch am Irchel",
-  "Dachsen",
-  "Dorf",
-  "Feuerthalen",
-  "Flaach",
-  "Flurlingen",
-  "Henggart",
-  "Kleinandelfingen",
-  "Laufen-Uhwiesen",
-  "Marthalen",
-  "Ossingen",
-  "Rheinau",
-  "Thalheim an der Thur",
-  "Trüllikon",
-  "Truttikon",
-  "Volken",
-  "Bachenbülach",
-  "Bassersdorf",
-  "Bülach",
-  "Dietlikon",
-  "Eglisau",
-  "Embrach",
-  "Freienstein-Teufen",
-  "Glattfelden",
-  "Hochfelden",
-  "Höri",
-  "Hüntwangen",
-  "Kloten",
-  "Lufingen",
-  "Nürensdorf",
-  "Oberembrach",
-  "Opfikon",
-  "Rafz",
-  "Rorbas",
-  "Wallisellen",
-  "Wasterkingen",
-  "Wil (ZH)",
-  "Winkel",
-  "Bachs",
-  "Boppelsen",
-  "Buchs (ZH)",
-  "Dällikon",
-  "Dänikon",
-  "Dielsdorf",
-  "Hüttikon",
-  "Neerach",
-  "Niederglatt",
-  "Niederhasli",
-  "Niederweningen",
-  "Oberglatt",
-  "Oberweningen",
-  "Otelfingen",
-  "Regensberg",
-  "Regensdorf",
-  "Rümlang",
-  "Schleinikon",
-  "Schöfflisdorf",
-  "Stadel",
-  "Steinmaur",
-  "Weiach",
-  "Bäretswil",
-  "Bubikon",
-  "Dürnten",
-  "Fischenthal",
-  "Gossau (ZH)",
-  "Grüningen",
-  "Hinwil",
-  "Rüti (ZH)",
-  "Seegräben",
-  "Wald (ZH)",
-  "Wetzikon (ZH)",
-  "Adliswil",
-  "Kilchberg (ZH)",
-  "Langnau am Albis",
-  "Oberrieden",
-  "Richterswil",
-  "Rüschlikon",
-  "Thalwil",
-  "Erlenbach (ZH)",
-  "Herrliberg",
-  "Hombrechtikon",
-  "Küsnacht (ZH)",
-  "Männedorf",
-  "Meilen",
-  "Oetwil am See",
-  "Stäfa",
-  "Uetikon am See",
-  "Zumikon",
-  "Zollikon",
-  "Fehraltorf",
-  "Hittnau",
-  "Lindau",
-  "Pfäffikon",
-  "Russikon",
-  "Weisslingen",
-  "Wila",
-  "Wildberg",
-  "Dübendorf",
-  "Egg",
-  "Fällanden",
-  "Greifensee",
-  "Maur",
-  "Mönchaltorf",
-  "Schwerzenbach",
-  "Uster",
-  "Volketswil",
-  "Wangen-Brüttisellen",
-  "Altikon",
-  "Brütten",
-  "Dägerlen",
-  "Dättlikon",
-  "Dinhard",
-  "Ellikon an der Thur",
-  "Elsau",
-  "Hagenbuch",
-  "Hettlingen",
-  "Neftenbach",
-  "Pfungen",
-  "Rickenbach (ZH)",
-  "Schlatt (ZH)",
-  "Seuzach",
-  "Turbenthal",
-  "Winterthur",
-  "Zell (ZH)",
-  "Aesch (ZH)",
-  "Birmensdorf (ZH)",
-  "Dietikon",
-  "Geroldswil",
-  "Oberengstringen",
-  "Oetwil an der Limmat",
-  "Schlieren",
-  "Uitikon",
-  "Unterengstringen",
-  "Urdorf",
-  "Weiningen (ZH)",
-  "Zürich",
-  "Andelfingen",
-  "Stammheim",
-  "Wädenswil",
-  "Elgg",
-  "Horgen",
-  "Illnau-Effretikon",
-  "Bauma",
-  "Wiesendangen",
-] as const