@3ddv/software-division-components 2.0.0-beta.0 → 2.0.1

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

@@ -1,304 +0,0 @@
-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

@@ -1,262 +0,0 @@
-/*
-* 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

@@ -1,40 +0,0 @@
-<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>