ANC-UI

✨ Features

• ANC web-component designed for all web applications.

🖥 Environment Support

• Modern browsers
• Server-side Rendering

| Edge | Firefox | Chrome | Safari | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge | last 2 versions | last 2 versions | last 2 versions |

📦 Install

npm install @anc-delivers/ui-web

yarn add @anc-delivers/ui-web

pnpm add @anc-delivers/ui-web

🔨 Usage

VUE

Replace apikey with the key provided by ANC

<script setup lang="ts">
import "@anc-delivers/ui-web";
import "@anc-delivers/ui-web/dist/index.css";
</script>

<template>
  <anc-capacity-widget
    variant="slider"
    apiKey="apikey"
    postcode="3000"
    suburb="melbourne"
    limit="6"
  />
</template>

Get delivery date by accessing state

<script>
const wc = document.querySelector("anc-capacity-widget");
const deliveryDate = wc.deliveryDate; // ✅ Directly access exposed state
</script>

🏭 Components and Properties

<anc-capacity-widget />

| Property | Type | Required | Default Value | Description | | ------------------- | ------ | -------- | ---------------------------- | ----- | | variant | string | ✅ | | 'slider','radio' | | apiKey | string | ✅ | | Provided by ANC Delivers | | suburb | string | ✅ | | 'melbourne' | | postcode | string | ✅ | | '3000' | | limit | number | ⭕ | 6 | | | primaryColor | string | ⭕ | '#a855f7' | | | primaryHoverColor | string | ⭕ | '#d8b4fe' | | | spinnerColor | string | ⭕ | '#a855f7' | | | fontSize | string | ⭕ | '0.875rem' | | | fontColor | string | ⭕ | '#475569' | | | fontWeight | string | ⭕ | '400' | | | fontStyle | string | ⭕ | 'Arial, Helvetica, sans-serif;' | | | fontDisabledColor | string | ⭕ | '#9ca3af' | | | headerFontColor | string | ⭕ | '#f3e8ff' | | | borderColor | string | ⭕ | '#a855f7' | | | backgroundColor | string | ⭕ | '#fff' | | | buttonColor | string | ⭕ | '#f5f5f5' | | | buttonHoverColor | string | ⭕ | '#f3e8ff' | | | buttonDisabledColor | string | ⭕ | '#e5e7eb' | | | buttonActiveColor | string | ⭕ | '#d8b4fe' | | | buttonSelectedColor | string | ⭕ | '#d8b4fe' | | | radioWidth | string | ⭕ | '160px' | | | sliderWidth | string | ⭕ | '316px' | | | sliderButtonWidth | string | ⭕ | '100px' | | | sliderButtonHeight | string | ⭕ | '36px' | | | chevronSize | number | ⭕ | 108 | | | transformLength | number | ⭕ | 15 | |

🔗 Links

• React component