native-document 1.0.166 → 1.0.169

package/src/ui/components/icon/material/MaterialIconRender.js

@@ -0,0 +1,71 @@
+import './material.css';
+import MAP from './material.map.js';
+import { Span } from '../../../../core/elements';
+
+const SIZES = {
+    small:      16,
+    medium:     24,
+    large:      32,
+    extraLarge: 48,
+};
+
+// Variant -> CSS class
+// Material Icons uses the class as the font-family selector
+const VARIANT_CLASS = {
+    fill:     'material-icons',
+    regular:  'material-icons',
+    outline:  'material-icons-outlined',
+    round:    'material-icons-round',
+    sharp:    'material-icons-sharp',
+    twoTone:  'material-icons-two-tone',
+};
+
+/**
+ * Renders a Google Material Icon as a <span> element using CSS webfont ligatures.
+ * The icon name is the text content of the element — Material Icons uses ligatures.
+ *
+ * Variants: fill/regular (default), outline, round, sharp, twoTone
+ * Each variant requires its own CSS - see material.css.
+ *
+ * @param {object} $desc
+ * @param {string} $desc.name
+ * @param {'fill'|'regular'|'outline'|'round'|'sharp'|'twoTone'|Observable<string>|null} $desc.variant
+ * @param {'small'|'medium'|'large'|'extraLarge'|number|Observable<string|number>|null} $desc.size
+ * @param {string|Observable<string>|null} $desc.color
+ * @returns {HTMLElement}
+ */
+export default function MaterialIconRender($desc) {
+    const materialName = MAP[$desc.name] ?? $desc.name;
+    const style        = {};
+
+    let className;
+
+    if($desc.variant?.__$Observable) {
+        className = $desc.variant.transform((variant) => {
+            return VARIANT_CLASS[variant] ?? VARIANT_CLASS.fill;
+        });
+    } else {
+        className = VARIANT_CLASS[$desc.variant] ?? VARIANT_CLASS.fill;
+    }
+
+    if($desc.size?.__$Observable) {
+        style.fontSize = $desc.size.transform((size) => {
+            const px = typeof size === 'number' ? size : (SIZES[size] ?? SIZES.medium);
+            return `${px}px`;
+        });
+    } else {
+        const px = typeof $desc.size === 'number' ? $desc.size : (SIZES[$desc.size] ?? SIZES.medium);
+        style.fontSize = `${px}px`;
+    }
+
+    if($desc.color) {
+        style.color = $desc.color;
+    }
+
+    // Material Icons uses ligatures — the icon name is the text content
+    return Span({
+        'aria-hidden': 'true',
+        class:         className,
+        style,
+    }, materialName);
+}

package/src/ui/components/icon/material/material.css

@@ -0,0 +1,15 @@
+/*
+ * Google Material Icons webfont
+ * Install : npm install material-icons
+ *
+ * Import only the variants you need.
+ */
+/*@import 'material-icons/iconfont/filled.css';*/
+
+/*
+ * Uncomment the variants you need:
+ */
+/* @import 'material-icons/iconfont/outlined.css';  */
+/* @import 'material-icons/iconfont/round.css';     */
+/* @import 'material-icons/iconfont/sharp.css';     */
+/* @import 'material-icons/iconfont/two-tone.css';  */

package/src/ui/components/icon/material/material.map.js

@@ -0,0 +1,170 @@
+/**
+ * Google Material Icons — ligature names.
+ * The icon name IS the ligature text content of the element.
+ * Names use snake_case as defined by Google.
+ */
+export default {
+    // Navigation
+    arrowLeft:      'arrow_back',
+    arrowRight:     'arrow_forward',
+    arrowUp:        'arrow_upward',
+    arrowDown:      'arrow_downward',
+    chevronLeft:    'chevron_left',
+    chevronRight:   'chevron_right',
+    chevronUp:      'expand_less',
+    chevronDown:    'expand_more',
+    home:           'home',
+    menu:           'menu',
+    close:          'close',
+    back:           'arrow_back',
+    forward:        'arrow_forward',
+    expand:         'open_in_full',
+    collapse:       'close_fullscreen',
+    fullscreen:     'fullscreen',
+    fullscreenExit: 'fullscreen_exit',
+
+    // Actions
+    search:         'search',
+    filter:         'filter_list',
+    sort:           'sort',
+    edit:           'edit',
+    delete:         'delete',
+    add:            'add',
+    remove:         'remove',
+    save:           'save',
+    copy:           'content_copy',
+    download:       'download',
+    upload:         'upload',
+    share:          'share',
+    refresh:        'refresh',
+    more:           'more_horiz',
+    settings:       'settings',
+    drag:           'drag_indicator',
+    resize:         'open_with',
+    undo:           'undo',
+    redo:           'redo',
+    scan:           'qr_code_scanner',
+    print:          'print',
+    import:         'file_upload',
+    export:         'file_download',
+
+    // Feedback
+    check:          'check',
+    checkCircle:    'check_circle',
+    error:          'error',
+    warning:        'warning',
+    info:           'info',
+    help:           'help',
+    loading:        'sync',
+    success:        'task_alt',
+
+    // User
+    user:           'person',
+    userCircle:     'account_circle',
+    users:          'group',
+    lock:           'lock',
+    unlock:         'lock_open',
+    eye:            'visibility',
+    eyeOff:         'visibility_off',
+    bell:           'notifications',
+    notification:   'notification_important',
+
+    // Files & Media
+    file:           'insert_drive_file',
+    folder:         'folder',
+    image:          'image',
+    document:       'description',
+    attachment:     'attach_file',
+    link:           'link',
+    externalLink:   'open_in_new',
+    play:           'play_arrow',
+    pause:          'pause',
+    stop:           'stop',
+    mute:           'volume_off',
+    sound:          'volume_up',
+    video:          'videocam',
+    camera:         'camera_alt',
+
+    // Interface
+    grid:           'grid_view',
+    list:           'list',
+    calendar:       'calendar_today',
+    clock:          'access_time',
+    tag:            'label',
+    tags:           'label',
+    qrCode:         'qr_code',
+    barcode:        'barcode_reader',
+
+    // Text editing
+    bold:           'format_bold',
+    italic:         'format_italic',
+    underline:      'format_underlined',
+    strikethrough:  'strikethrough_s',
+    alignLeft:      'format_align_left',
+    alignCenter:    'format_align_center',
+    alignRight:     'format_align_right',
+    alignJustify:   'format_align_justify',
+    orderedList:    'format_list_numbered',
+    unorderedList:  'format_list_bulleted',
+    indent:         'format_indent_increase',
+    outdent:        'format_indent_decrease',
+    scissors:       'content_cut',
+    fontColor:      'format_color_text',
+    highlight:      'highlight',
+
+    // Data & charts
+    barChart:       'bar_chart',
+    lineChart:      'show_chart',
+    pieChart:       'pie_chart',
+    areaChart:      'area_chart',
+    table:          'table_chart',
+    database:       'storage',
+
+    // Commerce & finance
+    shoppingCart:   'shopping_cart',
+    creditCard:     'credit_card',
+    wallet:         'account_balance_wallet',
+    bank:           'account_balance',
+    gift:           'card_giftcard',
+    percentage:     'percent',
+    dollar:         'attach_money',
+    euro:           'euro',
+
+    // Communication
+    mail:           'mail',
+    message:        'message',
+    comment:        'comment',
+    phone:          'phone',
+
+    // System & dev
+    cloud:          'cloud',
+    cloudUpload:    'cloud_upload',
+    cloudDownload:  'cloud_download',
+    api:            'api',
+    code:           'code',
+    bug:            'bug_report',
+    tool:           'build',
+    robot:          'smart_toy',
+
+    // Location
+    map:            'map',
+    compass:        'explore',
+    global:         'language',
+    location:       'location_on',
+
+    // Shapes & objects
+    star:           'star',
+    heart:          'favorite',
+    flag:           'flag',
+    trophy:         'emoji_events',
+    medal:          'military_tech',
+    rocket:         'rocket_launch',
+    fire:           'local_fire_department',
+    thunder:        'bolt',
+    smile:          'sentiment_satisfied',
+    frown:          'sentiment_dissatisfied',
+    like:           'thumb_up',
+    dislike:        'thumb_down',
+    safety:         'verified_user',
+    key:            'key',
+};

package/src/ui/components/icon/phosphor/PhosphorIconRender.js

@@ -0,0 +1,71 @@
+import './phosphor.css';
+import MAP from './phosphor.map.js';
+import { Span } from '../../../../core/elements';
+
+const SIZES = {
+    small:      16,
+    medium:     24,
+    large:      32,
+    extraLarge: 48,
+};
+
+// Variant -> CSS weight class
+// regular uses 'ph' (no suffix), others use 'ph-{variant}'
+const VARIANT_CLASS = {
+    thin:    'ph-thin',
+    light:   'ph-light',
+    regular: 'ph',
+    bold:    'ph-bold',
+    fill:    'ph-fill',
+    duotone: 'ph-duotone',
+};
+
+/**
+ * Renders a Phosphor icon as a <span> element using CSS webfont classes.
+ *
+ * Variants: thin, light, regular (default), bold, fill, duotone
+ * Each variant requires its own CSS - see phosphor.css.
+ *
+ * @param {object} $desc
+ * @param {string} $desc.name
+ * @param {'thin'|'light'|'regular'|'bold'|'fill'|'duotone'|Observable<string>|null} $desc.variant
+ * @param {'small'|'medium'|'large'|'extraLarge'|number|Observable<string|number>|null} $desc.size
+ * @param {string|Observable<string>|null} $desc.color
+ * @returns {HTMLElement}
+ */
+export default function PhosphorIconRender($desc) {
+    const phosphorName = MAP[$desc.name] ?? $desc.name;
+    const style        = {};
+
+    let className;
+
+    if($desc.variant?.__$Observable) {
+        className = $desc.variant.transform((variant) => {
+            const weightClass = VARIANT_CLASS[variant] ?? 'ph';
+            return `${weightClass} ph-${phosphorName}`;
+        });
+    } else {
+        const weightClass = VARIANT_CLASS[$desc.variant] ?? 'ph';
+        className = `${weightClass} ph-${phosphorName}`;
+    }
+
+    if($desc.size?.__$Observable) {
+        style.fontSize = $desc.size.transform((size) => {
+            const px = typeof size === 'number' ? size : (SIZES[size] ?? SIZES.medium);
+            return `${px}px`;
+        });
+    } else {
+        const px = typeof $desc.size === 'number' ? $desc.size : (SIZES[$desc.size] ?? SIZES.medium);
+        style.fontSize = `${px}px`;
+    }
+
+    if($desc.color) {
+        style.color = $desc.color;
+    }
+
+    return Span({
+        'aria-hidden': 'true',
+        class: className,
+        style,
+    });
+}

package/src/ui/components/icon/phosphor/phosphor.css

@@ -0,0 +1,17 @@
+/*
+ * Phosphor Icons webfont
+ * Install : npm install @phosphor-icons/web
+ *
+ * Each variant requires its own CSS file.
+ * Import only the variants you need to keep bundle size minimal.
+ */
+/*@import '@phosphor-icons/web/src/regular/style.css';*/
+
+/*
+ * Uncomment the variants you need:
+ */
+/* @import '@phosphor-icons/web/src/thin/style.css';    */
+/* @import '@phosphor-icons/web/src/light/style.css';   */
+/* @import '@phosphor-icons/web/src/bold/style.css';    */
+/* @import '@phosphor-icons/web/src/fill/style.css';    */
+/* @import '@phosphor-icons/web/src/duotone/style.css'; */

package/src/ui/components/icon/phosphor/phosphor.map.js

@@ -0,0 +1,165 @@
+export default {
+    // Navigation
+    arrowLeft:      'arrow-left',
+    arrowRight:     'arrow-right',
+    arrowUp:        'arrow-up',
+    arrowDown:      'arrow-down',
+    chevronLeft:    'caret-left',
+    chevronRight:   'caret-right',
+    chevronUp:      'caret-up',
+    chevronDown:    'caret-down',
+    home:           'house',
+    menu:           'list',
+    close:          'x',
+    back:           'arrow-left',
+    forward:        'arrow-right',
+    expand:         'arrows-out',
+    collapse:       'arrows-in',
+    fullscreen:     'arrows-out-simple',
+    fullscreenExit: 'arrows-in-simple',
+
+    // Actions
+    search:         'magnifying-glass',
+    filter:         'funnel',
+    sort:           'arrows-down-up',
+    edit:           'pencil-simple',
+    delete:         'trash',
+    add:            'plus',
+    remove:         'minus',
+    save:           'floppy-disk',
+    copy:           'copy',
+    download:       'download-simple',
+    upload:         'upload-simple',
+    share:          'share-network',
+    refresh:        'arrows-clockwise',
+    more:           'dots-three',
+    settings:       'gear-six',
+    drag:           'dots-six-vertical',
+    resize:         'corners-out',
+    undo:           'arrow-counter-clockwise',
+    redo:           'arrow-clockwise',
+    scan:           'scan',
+    print:          'printer',
+    import:         'upload',
+    export:         'export',
+
+    // Feedback
+    check:          'check',
+    checkCircle:    'check-circle',
+    error:          'x-circle',
+    warning:        'warning',
+    info:           'info',
+    help:           'question',
+    loading:        'circle-notch',
+    success:        'check-circle',
+
+    // User
+    user:           'user',
+    userCircle:     'user-circle',
+    users:          'users',
+    lock:           'lock',
+    unlock:         'lock-open',
+    eye:            'eye',
+    eyeOff:         'eye-slash',
+    bell:           'bell',
+    notification:   'bell-ringing',
+
+    // Files & Media
+    file:           'file',
+    folder:         'folder',
+    image:          'image',
+    document:       'file-text',
+    attachment:     'paperclip',
+    link:           'link',
+    externalLink:   'arrow-square-out',
+    play:           'play',
+    pause:          'pause',
+    stop:           'stop',
+    mute:           'speaker-slash',
+    sound:          'speaker-high',
+    video:          'video',
+    camera:         'camera',
+
+    // Interface
+    grid:           'squares-four',
+    list:           'list',
+    calendar:       'calendar',
+    clock:          'clock',
+    tag:            'tag',
+    tags:           'tag',
+    qrCode:         'qr-code',
+    barcode:        'barcode',
+
+    // Text editing
+    bold:           'text-b',
+    italic:         'text-italic',
+    underline:      'text-underline',
+    strikethrough:  'text-strikethrough',
+    alignLeft:      'text-align-left',
+    alignCenter:    'text-align-center',
+    alignRight:     'text-align-right',
+    alignJustify:   'text-align-justify',
+    orderedList:    'list-numbers',
+    unorderedList:  'list-bullets',
+    indent:         'text-indent',
+    outdent:        'text-outdent',
+    scissors:       'scissors',
+    fontColor:      'text-aa',
+    highlight:      'highlighter-circle',
+
+    // Data & charts
+    barChart:       'chart-bar',
+    lineChart:      'chart-line',
+    pieChart:       'chart-pie',
+    areaChart:      'chart-line-up',
+    table:          'table',
+    database:       'database',
+
+    // Commerce & finance
+    shoppingCart:   'shopping-cart',
+    creditCard:     'credit-card',
+    wallet:         'wallet',
+    bank:           'bank',
+    gift:           'gift',
+    percentage:     'percent',
+    dollar:         'currency-dollar',
+    euro:           'currency-eur',
+
+    // Communication
+    mail:           'envelope',
+    message:        'chat-text',
+    comment:        'chat',
+    phone:          'phone',
+
+    // System & dev
+    cloud:          'cloud',
+    cloudUpload:    'cloud-arrow-up',
+    cloudDownload:  'cloud-arrow-down',
+    api:            'plugs',
+    code:           'code',
+    bug:            'bug',
+    tool:           'wrench',
+    robot:          'robot',
+
+    // Location
+    map:            'map-trifold',
+    compass:        'compass',
+    global:         'globe',
+    location:       'map-pin',
+
+    // Shapes & objects
+    star:           'star',
+    heart:          'heart',
+    flag:           'flag',
+    trophy:         'trophy',
+    medal:          'medal',
+    rocket:         'rocket',
+    fire:           'fire',
+    thunder:        'lightning',
+    smile:          'smiley',
+    frown:          'smiley-melting',
+    like:           'thumbs-up',
+    dislike:        'thumbs-down',
+    safety:         'shield-check',
+    key:            'key',
+};

package/src/ui/components/icon/tabler/TablerIconRender.js

@@ -0,0 +1,59 @@
+import MAP from './tabler.map.js';
+import {Italic, Span} from '../../../../core/elements';
+
+const SIZES = {
+    small:      16,
+    medium:     24,
+    large:      32,
+    extraLarge: 48,
+};
+
+import './tabler.css';
+
+/**
+ * Renders a Tabler icon as an <i> element using CSS webfont classes.
+ *
+ * Variants:
+ *   - outline (default) : ti ti-{name}          requires tabler-icons.css
+ *   - fill              : ti ti-{name}-filled    requires tabler-icons-filled.css
+ *
+ * @param {object} $desc
+ * @param {string} $desc.name
+ * @param {'outline'|'fill'|null} $desc.variant
+ * @param {'small'|'medium'|'large'|'extraLarge'|number|null} $desc.size
+ * @param {string|null} $desc.color
+ * @returns {HTMLElement}
+ */
+export default function TablerIconRender($desc) {
+    const tablerName = MAP[$desc.name] ?? $desc.name;
+    const style = {};
+
+    let className = '';
+    if($desc.variant?.__$Observable) {
+        className = $desc.variant.format((variant) => {
+            if(variant === 'fill') {
+                return `ti ti-${tablerName}-filled`;
+            }
+            return `ti ti-${tablerName}`;
+        });
+    } else {
+        className = ($desc.variant === 'fill') ? `ti ti-${tablerName}-filled` : `ti ti-${tablerName}`;
+    }
+
+    let px;
+
+    style.fontSize = $desc.size?.__$Observable
+        ? $desc.size.transform((size) => `${typeof size === 'number' ? size : (SIZES[size] ?? SIZES.medium)}px`)
+        : `${typeof $desc.size === 'number' ? $desc.size : (SIZES[$desc.size] ?? SIZES.medium)}px`;
+
+    if($desc.color) {
+        style.color = $desc.color;
+    }
+    console.log(style);
+
+    return Italic({
+        'aria-hidden': 'true',
+        style,
+        class: className,
+    });
+}

package/src/ui/components/icon/tabler/tabler.css

@@ -0,0 +1,14 @@
+/*
+ * Tabler Icons webfont
+ * Outline : @tabler/icons-webfont/tabler-icons.css
+ * Filled  : @tabler/icons-webfont/tabler-icons-filled.css
+ *
+ * Install : npm install @tabler/icons-webfont
+ */
+/*@import '@tabler/icons-webfont/tabler-icons.css';*/
+
+/*
+ * Uncomment to enable filled variant (ti ti-{name}-filled)
+ * Note: filled and outline use separate font files
+ */
+/* @import '@tabler/icons-webfont/tabler-icons-filled.css'; */