@3ddv/software-division-components 1.5.0 → 2.0.0

package/backoffice/checkbox/story/checkbox.stories.ts

@@ -0,0 +1,304 @@
+import { FormControl } from '@angular/forms';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { CheckboxComponent } from '../checkbox.component';
+
+const meta: Meta<CheckboxComponent> = {
+  title: 'Backoffice/Checkbox',
+  component: CheckboxComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<CheckboxComponent>;
+
+// Basic checkbox with default settings
+export const Default: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl(false),
+    },
+    template: `
+      <sdc-checkbox
+        label="Accept terms and conditions"
+        name="terms"
+        value="accepted"
+        [control]="formControl"
+      />
+    `,
+  }),
+};
+
+// Checkbox group with multiple options
+export const CheckboxGroup: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl(['option1']),
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <sdc-checkbox
+          label="Option 1"
+          name="group1"
+          value="option1"
+          [control]="formControl"
+        />
+        <sdc-checkbox
+          label="Option 2"
+          name="group1"
+          value="option2"
+          [control]="formControl"
+        />
+        <sdc-checkbox
+          label="Option 3"
+          name="group1"
+          value="option3"
+          [control]="formControl"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Checkbox with label on the right
+export const LabelRight: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl(false),
+    },
+    template: `
+      <sdc-checkbox
+        label="Checkbox with right label"
+        labelPosition="right"
+        name="right-label"
+        value="option1"
+        [control]="formControl"
+      />
+    `,
+  }),
+};
+
+// Checkbox with different themes
+export const ThemeVariations: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <sdc-checkbox
+          label="SDC Theme"
+          theme="theme-sdc"
+          name="theme-sdc"
+          value="sdc"
+          [control]="sdcControl"
+        />
+        <sdc-checkbox
+          label="Backoffice Theme"
+          theme="theme-backoffice"
+          name="theme-backoffice"
+          value="backoffice"
+          [control]="backofficeControl"
+        />
+      </div>
+    `,
+    props: {
+      sdcControl: new FormControl(false),
+      backofficeControl: new FormControl(false),
+    },
+  }),
+};
+
+// Checkbox with different style classes (variants and sizes)
+export const StyleVariations: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem; width: 400px;">
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Primary Variant</h4>
+          <sdc-checkbox
+            label="Primary Option"
+            [styleClass]="['variant-primary', 'size-md']"
+            name="primary-group"
+            value="primary"
+            [control]="primaryControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Secondary Variant</h4>
+          <sdc-checkbox
+            label="Secondary Option"
+            [styleClass]="['variant-secondary', 'size-md']"
+            name="secondary-group"
+            value="secondary"
+            [control]="secondaryControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Alternative Variant</h4>
+          <sdc-checkbox
+            label="Alternative Option"
+            [styleClass]="['variant-alternative', 'size-md']"
+            name="alternative-group"
+            value="alternative"
+            [control]="alternativeControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Success Variant</h4>
+          <sdc-checkbox
+            label="Success Option"
+            [styleClass]="['variant-success', 'size-md']"
+            name="success-group"
+            value="success"
+            [control]="successControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Warning Variant</h4>
+          <sdc-checkbox
+            label="Warning Option"
+            [styleClass]="['variant-warning', 'size-md']"
+            name="warning-group"
+            value="warning"
+            [control]="warningControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Danger Variant</h4>
+          <sdc-checkbox
+            label="Danger Option"
+            [styleClass]="['variant-danger', 'size-md']"
+            name="danger-group"
+            value="danger"
+            [control]="dangerControl"
+          />
+        </div>
+      </div>
+    `,
+    props: {
+      primaryControl: new FormControl(false),
+      secondaryControl: new FormControl(false),
+      alternativeControl: new FormControl(false),
+      successControl: new FormControl(false),
+      warningControl: new FormControl(false),
+      dangerControl: new FormControl(false),
+    },
+  }),
+};
+
+// Checkbox with different sizes
+export const SizeVariations: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem; width: 400px;">
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Small Size</h4>
+          <sdc-checkbox
+            label="Small Checkbox"
+            [styleClass]="['size-sm']"
+            name="size-sm"
+            value="small"
+            [control]="smallControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Medium Size</h4>
+          <sdc-checkbox
+            label="Medium Checkbox"
+            [styleClass]="['size-md']"
+            name="size-md"
+            value="medium"
+            [control]="mediumControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Large Size</h4>
+          <sdc-checkbox
+            label="Large Checkbox"
+            [styleClass]="['size-lg']"
+            name="size-lg"
+            value="large"
+            [control]="largeControl"
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <h4 style="margin: 0; color: #666;">Extra Large Size</h4>
+          <sdc-checkbox
+            label="Extra Large Checkbox"
+            [styleClass]="['size-xl']"
+            name="size-xl"
+            value="xl"
+            [control]="xlControl"
+          />
+        </div>
+      </div>
+    `,
+    props: {
+      smallControl: new FormControl(false),
+      mediumControl: new FormControl(false),
+      largeControl: new FormControl(false),
+      xlControl: new FormControl(false),
+    },
+  }),
+};
+
+// Disabled checkbox
+export const Disabled: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl({ value: false, disabled: true }),
+    },
+    template: `
+      <sdc-checkbox
+        label="Disabled Checkbox"
+        name="disabled-group"
+        value="disabled"
+        [disabled]="true"
+        [control]="formControl"
+      />
+    `,
+  }),
+};
+
+// Checked checkbox
+export const Checked: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl(true),
+    },
+    template: `
+      <sdc-checkbox
+        label="Checked Checkbox"
+        name="checked-group"
+        value="checked"
+        [control]="formControl"
+      />
+    `,
+  }),
+};
+
+// Checkbox with custom className
+export const CustomClassName: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl(false),
+    },
+    template: `
+      <sdc-checkbox
+        label="Custom Styled Checkbox"
+        name="custom-group"
+        value="custom"
+        className="border-2 border-blue-500 p-2 rounded"
+        [control]="formControl"
+      />
+    `,
+  }),
+};

package/backoffice/datepicker/datepicker.component.css

@@ -0,0 +1,262 @@
+/*
+* This dialog in rendered at the root of the DOM.
+* For the styles to apply to the dialog, we need to apply the theme-sdc class
+* to the dialog container located here:
+* /src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.ts
+*/
+
+.sdc-datepicker {
+  --sdc-datepicker-label-color: var(--color-neutral-700);
+  --sdc-datepicker-label-size: var(--text-base);
+  --sdc-datepicker-label-weight: var(--font-semibold);
+  --sdc-datepicker-label-gap: var(--space-6);
+  --sdc-datepicker-label-width: auto;
+  --sdc-datepicker-input-width: 100%;
+  --sdc-datepicker-input-background: var(--color-pure-white);
+  --sdc-datepicker-input-border-color: var(--color-neutral-300);
+  --sdc-datepicker-input-border-width: var(--border-default);
+  --sdc-datepicker-input-border-radius: var(--radius-full);
+  --sdc-datepicker-input-padding-vertical: var(--space-2);
+  --sdc-datepicker-input-padding-horizontal: var(--space-3);
+  --sdc-datepicker-input-text-color: var(--color-neutral-900);
+  --sdc-datepicker-input-text-size: var(--text-base);
+  --sdc-datepicker-input-text-weight: var(--font-medium);
+  --sdc-datepicker-input-border-hover: var(--color-neutral-500);
+  --sdc-datepicker-input-focus-ring-width: var(--border-default);
+  --sdc-datepicker-input-focus-ring-color: var(--color-primary);
+  --sdc-datepicker-input-focus-ring-offset: var(--border-2);
+  --sdc-datepicker-placeholder-color: var(--color-neutral-500);
+  --sdc-datepicker-placeholder-size: var(--text-sm);
+  --sdc-datepicker-placeholder-weight: var(--font-medium);
+  --sdc-datepicker-hint-color: var(--color-neutral-600);
+  --sdc-datepicker-hint-size: var(--text-xs);
+  --sdc-datepicker-error-color: var(--color-danger);
+  --sdc-datepicker-error-size: var(--text-xs);
+  --sdc-datepicker-calendar-background: var(--color-pure-white);
+  --sdc-datepicker-calendar-border-color: var(--color-neutral-200);
+  --sdc-datepicker-calendar-border-width: var(--border-default);
+  --sdc-datepicker-calendar-border-radius: var(--radius-lg);
+  --sdc-datepicker-calendar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --sdc-datepicker-calendar-padding: var(--space-4);
+  --sdc-datepicker-month-year-text-color: var(--color-neutral-900);
+  --sdc-datepicker-month-year-text-size: var(--text-base);
+  --sdc-datepicker-month-year-text-weight: var(--font-semibold);
+  --sdc-datepicker-month-year-hover-text-color: var(--color-neutral-900);
+  --sdc-datepicker-month-year-padding: var(--space-2);
+  --sdc-datepicker-month-year-button-background: var(--color-pure-white);
+  --sdc-datepicker-month-year-button-text-color-hover: var(--color-pure-white);
+  --sdc-datepicker-month-year-button-background-hover: var(--color-neutral-900);
+  --sdc-datepicker-day-button-disabled-background: transparent;
+  --sdc-datepicker-day-button-disabled-text-color: var(--color-neutral-300);
+  --sdc-datepicker-day-button-background: transparent;
+  --sdc-datepicker-day-button-text-color: var(--color-neutral-900);
+  --sdc-datepicker-day-button-text-size: var(--text-sm);
+  --sdc-datepicker-day-button-text-weight: var(--font-semibold);
+  --sdc-datepicker-day-button-border-radius: var(--radius-md);
+  --sdc-datepicker-day-button-padding: var(--space-2);
+  --sdc-datepicker-day-button-hover-background: var(--color-secondary);
+  --sdc-datepicker-day-button-hover-text-color: var(--color-pure-white);
+}
+
+.component-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sdc-datepicker-label-gap);
+  width: var(--sdc-datepicker-input-width);
+}
+
+.component-container hlm-date-picker {
+  width: var(--sdc-datepicker-input-width);
+}
+
+/* Label styles */
+.sdc-datepicker-label {
+  font-weight: var(--sdc-datepicker-label-weight);
+  font-size: var(--sdc-datepicker-label-size);
+  color: hsl(var(--sdc-datepicker-label-color));
+  width: var(--sdc-datepicker-label-width);
+  padding-left: var(--sdc-datepicker-input-padding-horizontal);
+  line-height: 1.25rem;
+  display: block;
+}
+
+.component-container:has(.sdc-datepicker-label.left) {
+  padding-left: 0;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Date picker input styles */
+.sdc-datepicker button[brnpopovertrigger] {
+  width: var(--sdc-datepicker-input-width);
+  background: var(--sdc-datepicker-input-background);
+  border: var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));
+  border-radius: var(--sdc-datepicker-input-border-radius);
+  padding: var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);
+  color: hsl(var(--sdc-datepicker-input-text-color));
+  font-size: var(--sdc-datepicker-input-text-size);
+  font-weight: var(--sdc-datepicker-input-text-weight);
+  cursor: pointer;
+  outline: none;
+}
+
+.sdc-datepicker-placeholder {
+  color: hsl(var(--sdc-datepicker-placeholder-color));
+  font-size: var(--sdc-datepicker-placeholder-size);
+  font-weight: var(--sdc-datepicker-placeholder-weight);
+}
+
+/* Focus and hover state */
+.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled) {
+  border-color: hsl(var(--sdc-datepicker-input-border-hover));
+}
+
+.sdc-datepicker button[brnpopovertrigger][data-state='open'] {
+  outline: var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));
+  outline-offset: var(--sdc-datepicker-input-focus-ring-offset);
+}
+
+/* Disabled state */
+.sdc-datepicker button[brnpopovertrigger]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: hsl(var(--color-neutral-100));
+}
+
+/* Error state */
+.sdc-datepicker-error {
+  color: hsl(var(--sdc-datepicker-error-color));
+  font-size: var(--sdc-datepicker-error-size);
+  line-height: 1rem;
+}
+
+/* Hint message styles */
+.sdc-datepicker-hint {
+  color: hsl(var(--sdc-datepicker-hint-color));
+  font-size: var(--sdc-datepicker-hint-size);
+  line-height: 1rem;
+}
+
+/* Calendar styles */
+.sdc-datepicker div[brncalendar] {
+  background: hsl(var(--sdc-datepicker-calendar-background));
+  border: var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));
+  border-radius: var(--sdc-datepicker-calendar-border-radius);
+  box-shadow: var(--sdc-datepicker-calendar-shadow);
+  padding: var(--sdc-datepicker-calendar-padding);
+}
+
+/* Month/Year selector styles */
+.sdc-datepicker div[brncalendarheader] {
+  color: hsl(var(--sdc-datepicker-month-year-text-color));
+  font-size: var(--sdc-datepicker-month-year-text-size);
+  font-weight: var(--sdc-datepicker-month-year-text-weight);
+  padding: var(--sdc-datepicker-month-year-padding);
+}
+
+.sdc-datepicker button[brncalendarpreviousbutton],
+.sdc-datepicker button[brncalendarnextbutton] {
+  cursor: pointer;
+  color: hsl(var(--sdc-datepicker-month-year-text-color));
+  background: hsl(var(--sdc-datepicker-month-year-button-background));
+  transition: all 0.2s ease;
+}
+
+.sdc-datepicker button[brncalendarpreviousbutton]:disabled,
+.sdc-datepicker button[brncalendarnextbutton]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  color: hsl(var(--color-neutral-100));
+}
+
+.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),
+.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled) {
+  color: hsl(var(--sdc-datepicker-month-year-button-text-color-hover));
+  background: hsl(var(--sdc-datepicker-month-year-button-background-hover));
+}
+
+/* Day button styles */
+.sdc-datepicker button[brncalendarcellbutton] {
+  background: hsl(var(--sdc-datepicker-day-button-background));
+  color: hsl(var(--sdc-datepicker-day-button-text-color));
+  font-size: var(--sdc-datepicker-day-button-text-size);
+  font-weight: var(--sdc-datepicker-day-button-text-weight);
+  border-radius: var(--sdc-datepicker-day-button-border-radius);
+  padding: var(--sdc-datepicker-day-button-padding);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled) {
+  background-color: hsl(var(--sdc-datepicker-day-button-hover-background));
+  color: hsl(var(--sdc-datepicker-day-button-hover-text-color));
+}
+
+/* .sdc-datepicker button[brncalendarcellbutton][data-selected] {
+  background-color: hsl(var(--sdc-datepicker-day-button-selected-background));
+  color: hsl(var(--sdc-datepicker-day-button-selected-text-color));
+}
+
+.sdc-datepicker button[brncalendarcellbutton][data-today] {
+  background-color: hsl(var(--sdc-datepicker-day-button-today-background));
+  color: hsl(var(--sdc-datepicker-day-button-today-text-color));
+  border: var(--sdc-datepicker-day-button-today-border-width) solid
+    hsl(var(--sdc-datepicker-day-button-today-border-color));
+} */
+
+.sdc-datepicker button[brncalendarcellbutton]:disabled {
+  background-color: hsl(var(--sdc-datepicker-day-button-disabled-background));
+  color: hsl(var(--sdc-datepicker-day-button-disabled-text-color));
+  cursor: not-allowed;
+}
+
+/* Variant styles */
+.variant-primary.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-primary);
+}
+
+.variant-secondary.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-secondary);
+}
+
+.variant-alternative.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-alternative);
+}
+
+.variant-success.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-success);
+}
+
+.variant-warning.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-warning);
+}
+
+.variant-danger.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-danger);
+}
+
+/* Radius variations */
+.radius-default.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-default);
+  --sdc-datepicker-day-button-border-radius: var(--radius-default);
+}
+
+.radius-sm.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-sm);
+  --sdc-datepicker-day-button-border-radius: var(--radius-sm);
+}
+
+.radius-md.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-md);
+  --sdc-datepicker-day-button-border-radius: var(--radius-md);
+}
+
+.radius-lg.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-lg);
+  --sdc-datepicker-day-button-border-radius: var(--radius-lg);
+}
+
+.radius-xl.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-xl);
+  --sdc-datepicker-day-button-border-radius: var(--radius-xl);
+}

package/backoffice/datepicker/datepicker.component.html

@@ -0,0 +1,40 @@
+<div [class]="computedClass()">
+  <div class="component-container">
+    <!-- Label positioned above or to the left -->
+    @if (showLabel()) {
+      <label [class]="labelClass()" [for]="name()">
+        {{ label() }}
+      </label>
+    }
+
+    <!-- The styleClass is applied to the date picker's dialog -->
+    <hlm-date-picker
+      [styleClass]="computedClass()"
+      [id]="name()"
+      [min]="minDate()!"
+      [max]="maxDate()!"
+      [date]="safeDate()"
+      [formatDate]="formatDate()"
+      [autoCloseOnSelect]="autoCloseOnSelect()"
+      [disabled]="disabled()"
+      (changed)="handleDateChange($event)">
+      @if (placeholder()) {
+        <span class="sdc-datepicker-placeholder">{{ placeholder() }}</span>
+      }
+    </hlm-date-picker>
+  </div>
+
+  <!-- Error message  -->
+  @if (showError()) {
+    <div class="sdc-datepicker-error">
+      {{ currentErrorMessage() }}
+    </div>
+  }
+
+  <!-- Hint message -->
+  @if (hint() && hint().trim().length > 0 && !showError()) {
+    <div class="sdc-datepicker-hint">
+      {{ hint() }}
+    </div>
+  }
+</div>