feat(styles): add pointer-events help classes

.changeset/warm-lemons-think.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**styles**: add pointer-events css help classes

docs/.storybook/blocks/css-utils/CssInteractions.tsx

@@ -4,3 +4,4 @@ import json from '../../../../packages/styles/docs/interaction.json'
 
 export const CssInteractionsCursor = () => <CssUtilitiesTable list={json} search="cursor" />
 export const CssInteractionsUserSelect = () => <CssUtilitiesTable list={json} search="user-select" />
+export const CssInteractionsPointerEvents = () => <CssUtilitiesTable list={json} search="pointer-events" />

docs/stories/utilities/interactions/pointer-events.stories.mdx

@@ -0,0 +1,53 @@
+import { Meta, Source, Canvas } from '@storybook/addon-docs'
+import {
+  Banner,
+  Lead,
+  Code,
+  CssInteractionsPointerEvents,
+  Footer,
+  LinkCard,
+  LinkCards,
+} from '../../../.storybook/blocks'
+
+<Meta
+  title="CSS Utilities/Interactions/Pointer Events"
+  parameters={{
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+<Banner label="Pointer Events" section="CSS Utilities" color="yellow" puzzle />
+
+<Lead>
+  The pointer-events CSS property determines the conditions under which a specific graphic element can receive pointer
+  events, if at all.
+</Lead>
+
+## Classes
+
+<CssInteractionsPointerEvents />
+
+<Code
+  language="html"
+  code={`
+<div class="flex flex-wrap align-items-center justify-content-center">
+  <button class="button m-small pointer-events-auto">Auto</button>
+  <button class="button m-small pointer-events-none">None</button>
+</div>
+`}
+/>
+
+<Footer>
+  <LinkCards>
+    <LinkCard
+      pageTitle="Foundation/Elevation"
+      description="Elevation involves the strategic application of shadow and depth to elements, enhancing visual hierarchy and providing depth cues within the user interface"
+    />
+    <LinkCard
+      pageTitle="Tokens/Overview"
+      description="Design tokens serve as the definitive source for naming and storing design choices."
+    />
+  </LinkCards>
+</Footer>

libs/nx/src/executors/build-styles/generators/interactions.ts

@@ -25,12 +25,21 @@ export const generateInteractions = async (options: BuildStylesExecutorSchema) =
     },
   })
 
+  const pointerEvents = utils.staticClass({
+    property: 'pointer-events',
+    responsive: false,
+    values: {
+      'pointer-events-auto': 'auto',
+      'pointer-events-none': 'none',
+    },
+  })
+
   return utils.save(
     'interaction',
     options.projectRoot,
     utils.merge({
-      docs: [userSelect.docs, cursor.docs],
-      rules: [userSelect.rules, cursor.rules],
+      docs: [userSelect.docs, cursor.docs, pointerEvents.docs],
+      rules: [userSelect.rules, cursor.rules, pointerEvents.rules],
     }),
   )
 }

packages/core/src/components.d.ts

@@ -721,6 +721,10 @@ export namespace Components {
           * If `true`, in Angular reactive forms the control will not be set invalid
          */
         "autoInvalidOff": boolean;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": BalProps.BalInputAutocomplete;
         /**
           * Closes the accordion
          */
@@ -3340,6 +3344,10 @@ export namespace Components {
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          */
         "autocapitalize": string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": BalProps.BalInputAutocomplete;
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
@@ -5804,6 +5812,10 @@ declare namespace LocalJSX {
           * If `true`, in Angular reactive forms the control will not be set invalid
          */
         "autoInvalidOff"?: boolean;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: BalProps.BalInputAutocomplete;
         /**
           * Closes the datepicker popover after selection
          */
@@ -8422,6 +8434,10 @@ declare namespace LocalJSX {
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          */
         "autocapitalize"?: string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: BalProps.BalInputAutocomplete;
         /**
           * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */